/*
 * PE-Class class progress screen owner v11661
 *
 * 반별 진도표의 PC·iPad·Fold 펼침 표와 하단 동작 영역은 이 파일이
 * 최종 소유합니다. 768px 이하 모바일 카드 UI는 기존
 * mobile-class-progress가 계속 담당합니다.
 */

@media (min-width:769px){
  body.classProgressApp #app,
  body.classProgressApp #app > .pe87ProgressPanel{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  body.classProgressApp #app > .pe87ProgressPanel{
    display:block!important;
    padding:16px!important;
    overflow:hidden!important;
    border:1px solid #d8e5ef!important;
    border-radius:10px!important;
    background:linear-gradient(180deg,#fbfdff 0,#fff 120px)!important;
  }

  body.classProgressApp #progressTableBox{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    border:1px solid #d4e2ed!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 10px 26px rgba(38,75,105,.08)!important;
    box-sizing:border-box!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress.dataTable{
    display:table!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    table-layout:fixed!important;
    border:0!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    background:#fff!important;
    box-sizing:border-box!important;
  }

  body.classProgressApp .pe87ClassProgress .progressColCheck{width:3.5%!important}
  body.classProgressApp .pe87ClassProgress .progressColLesson{width:6%!important}
  body.classProgressApp .pe87ClassProgress .progressColDate{width:20.5%!important}
  body.classProgressApp .pe87ClassProgress .progressColPeriod{width:6.5%!important}
  body.classProgressApp .pe87ClassProgress .progressColPlace{width:8.5%!important}
  body.classProgressApp .pe87ClassProgress .progressColSubject{width:12.5%!important}
  body.classProgressApp .pe87ClassProgress .progressColSubjectLesson{width:7.5%!important}
  body.classProgressApp .pe87ClassProgress .progressColActivity{width:28.5%!important}
  body.classProgressApp .pe87ClassProgress .progressColMemo{width:6.5%!important}

  body.classProgressApp #progressTableBox table.pe87ClassProgress th,
  body.classProgressApp #progressTableBox table.pe87ClassProgress td{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:8px 6px!important;
    border-top:0!important;
    border-left:0!important;
    border-right:1px solid #e0e9f1!important;
    white-space:normal!important;
    overflow:hidden!important;
    overflow-wrap:break-word!important;
    word-break:keep-all!important;
    text-align:center!important;
    vertical-align:middle!important;
    box-sizing:border-box!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress th{
    height:48px!important;
    border-bottom:2px solid #9fd0ef!important;
    background:linear-gradient(180deg,#edf8ff 0,#e5f2fb 100%)!important;
    color:#274b66!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1.25!important;
    letter-spacing:-.15px!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress td{
    height:76px!important;
    border-bottom:1px solid #e3ebf2!important;
    background:#fff!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress th:last-child,
  body.classProgressApp #progressTableBox table.pe87ClassProgress td:last-child{
    border-right:0!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress tbody tr:last-child td{
    border-bottom:0!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress tbody tr:nth-child(even) td{
    background:#fbfdff!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress tbody tr:hover td{
    background:#f4faff!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress input:not([type="checkbox"]),
  body.classProgressApp #progressTableBox table.pe87ClassProgress select,
  body.classProgressApp #progressTableBox table.pe87ClassProgress button{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress input.progressInput:not([type="checkbox"]),
  body.classProgressApp #progressTableBox table.pe87ClassProgress select.progressInput{
    display:block!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0 8px!important;
    border:1px solid #cfdeea!important;
    border-radius:9px!important;
    background:#f8fbfe!important;
    color:#233f55!important;
    font-size:12px!important;
    line-height:1.25!important;
    text-align:center!important;
    box-shadow:inset 0 1px 2px rgba(32,70,100,.035)!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress input:focus,
  body.classProgressApp #progressTableBox table.pe87ClassProgress select:focus,
  body.classProgressApp #progressTableBox table.pe87ClassProgress button:focus-visible{
    outline:0!important;
    border-color:#2794dc!important;
    background:#fff!important;
    box-shadow:0 0 0 3px rgba(39,148,220,.13)!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress input[type="checkbox"]{
    display:block!important;
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    margin:0 auto!important;
    padding:0!important;
    accent-color:#168ee0!important;
  }

  body.classProgressApp #progressTableBox table.pe87ClassProgress td:nth-child(2)>strong{
    display:inline-flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:72px!important;
    min-height:32px!important;
    margin:0 auto!important;
    padding:5px 7px!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #b7daf1!important;
    border-radius:999px!important;
    background:#eaf6fe!important;
    color:#197bb8!important;
    font-size:11.5px!important;
    font-weight:900!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }

  body.classProgressApp #progressTableBox .dateLine.dateLineInline{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:6px!important;
    box-sizing:border-box!important;
  }

  body.classProgressApp #progressTableBox .progressDatePicker{
    position:relative!important;
    display:flex!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body.classProgressApp #progressTableBox .progressDateDisplay{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    margin:0!important;
    padding:0 7px!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #cfdeea!important;
    border-radius:9px!important;
    background:#f8fbfe!important;
    color:#233f55!important;
    font-size:11.5px!important;
    font-weight:700!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  body.classProgressApp #progressTableBox .progressDateNative{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    cursor:pointer!important;
  }

  body.classProgressApp #progressTableBox .dateHint{
    display:none!important;
  }

  body.classProgressApp #progressTableBox .rowReset{
    flex:0 0 56px!important;
    width:56px!important;
    min-width:56px!important;
    max-width:56px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0 5px!important;
    border:1px solid #f1c3bd!important;
    border-radius:9px!important;
    background:#fff5f3!important;
    color:#e05245!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body.classProgressApp #progressTableBox .progressActivityPreview{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:54px!important;
    margin:0!important;
    padding:7px 8px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:5px!important;
    border:1px solid #cfdeea!important;
    border-radius:9px!important;
    background:#f8fbfe!important;
    color:#233f55!important;
    text-align:left!important;
    overflow:hidden!important;
  }

  body.classProgressApp #progressTableBox .progressActivityPreviewLines,
  body.classProgressApp #progressTableBox .progressActivityPreviewLine,
  body.classProgressApp #progressTableBox .progressActivityPreviewMeta{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  body.classProgressApp #progressTableBox .progressActivityPreviewLine{
    display:flex!important;
    min-width:0!important;
    align-items:center!important;
    gap:5px!important;
  }

  body.classProgressApp #progressTableBox .progressActivityPreviewLine em,
  body.classProgressApp #progressTableBox .progressActivityPreviewEmpty{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11.5px!important;
    line-height:1.25!important;
  }

  body.classProgressApp #progressTableBox .progressActivityPreviewMeta{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow:hidden!important;
  }

  body.classProgressApp #progressTableBox .progressMemoControl11620{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    align-items:center!important;
    justify-content:center!important;
  }

  body.classProgressApp #progressTableBox .progressMemoOpenBtn11620{
    display:inline-flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:68px!important;
    min-height:40px!important;
    margin:0 auto!important;
    padding:0 7px!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #bdd8eb!important;
    border-radius:9px!important;
    background:#f5fbff!important;
    color:#248bd2!important;
    font-size:11.5px!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body.classProgressApp #progressTableBox .progressMemoOpenBtn11620.hasMemo{
    border-color:#8fd9ba!important;
    background:#effbf6!important;
    color:#16805a!important;
  }

  body.classProgressApp #progressTableBox .progressActions.progressActionsSpaced{
    display:flex!important;
    width:calc(100% - 28px)!important;
    min-width:0!important;
    max-width:calc(100% - 28px)!important;
    min-height:66px!important;
    margin:14px!important;
    padding:12px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    border:1px solid #dce8f1!important;
    border-radius:12px!important;
    background:#f9fcff!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  body.classProgressApp #progressTableBox .progressSelectionActions{
    display:contents!important;
  }

  body.classProgressApp #progressTableBox #deleteProgressRows{
    order:1!important;
    margin:0 auto 0 0!important;
  }

  body.classProgressApp #progressTableBox #restoreSelectedProgressPlans{
    order:2!important;
    margin:0!important;
  }

  body.classProgressApp #progressTableBox #addProgressRow{
    order:3!important;
    margin:0!important;
  }

  body.classProgressApp #progressTableBox #addProgressRow,
  body.classProgressApp #progressTableBox #restoreSelectedProgressPlans,
  body.classProgressApp #progressTableBox #deleteProgressRows{
    display:inline-flex!important;
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:36%!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    padding:0 13px!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    font-size:11.5px!important;
    font-weight:800!important;
    line-height:1!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }

  body.classProgressApp #progressTableBox #restoreSelectedProgressPlans{
    color:#177bb9!important;
    border:1px solid #b8d9ec!important;
    background:#fff!important;
  }

  body.classProgressApp #progressTableBox #restoreSelectedProgressPlans:disabled,
  body.classProgressApp #progressTableBox #deleteProgressRows:disabled{
    cursor:not-allowed!important;
    opacity:.46!important;
    box-shadow:none!important;
  }
}

/* v1.16.62: the hidden memo input remains the data source only. */
body.classProgressApp #progressTableBox table.pe87ClassProgress
input.progressInput.progressMemoSource11620[data-k="memo"][hidden]{
  display:none!important;
  position:absolute!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

@media (min-width:769px) and (max-width:1440px){
  /*
   * 확정된 iPad 바텀시트/아코디언 간격:
   * 닫힌 연도 카드끼리, 연도→학기, 마지막 학기→다음 연도를
   * 모두 동일한 10px 체감 간격으로 유지합니다.
   */
  html.pe87Ipad body.classProgressApp .pe87Side .sideTree > .treeYear + .treeIndent,
  html.pe87IpadRuntime body.classProgressApp .pe87Side .sideTree > .treeYear + .treeIndent{
    margin-top:4px!important;
    margin-bottom:4px!important;
  }

  html.pe87Ipad body.classProgressApp .pe87Side .sideTree > .treeYear + .treeYear,
  html.pe87IpadRuntime body.classProgressApp .pe87Side .sideTree > .treeYear + .treeYear{
    margin-top:4px!important;
  }

  html.pe87Ipad body.classProgressApp #app > .pe87ProgressPanel,
  html.pe87IpadRuntime body.classProgressApp #app > .pe87ProgressPanel{
    padding:13px!important;
  }

  html.pe87Ipad body.classProgressApp #progressTableBox table.pe87ClassProgress th,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox table.pe87ClassProgress th{
    height:46px!important;
    padding:7px 4px!important;
    font-size:10.5px!important;
    line-height:1.2!important;
  }

  html.pe87Ipad body.classProgressApp #progressTableBox table.pe87ClassProgress td,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox table.pe87ClassProgress td{
    height:72px!important;
    padding:6px 4px!important;
  }

  html.pe87Ipad body.classProgressApp #progressTableBox table.pe87ClassProgress input.progressInput:not([type="checkbox"]),
  html.pe87Ipad body.classProgressApp #progressTableBox table.pe87ClassProgress select.progressInput,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox table.pe87ClassProgress input.progressInput:not([type="checkbox"]),
  html.pe87IpadRuntime body.classProgressApp #progressTableBox table.pe87ClassProgress select.progressInput{
    padding:0 5px!important;
    font-size:10.5px!important;
  }

  html.pe87Ipad body.classProgressApp #progressTableBox .progressDateDisplay,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox .progressDateDisplay{
    padding:0 4px!important;
    font-size:10px!important;
  }

  html.pe87Ipad body.classProgressApp #progressTableBox .rowReset,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox .rowReset{
    flex-basis:51px!important;
    width:51px!important;
    min-width:51px!important;
    max-width:51px!important;
    padding:0 3px!important;
    font-size:10px!important;
  }

  html.pe87Ipad body.classProgressApp #progressTableBox .progressActivityPreview,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox .progressActivityPreview{
    min-height:52px!important;
    padding:6px!important;
  }

  html.pe87Ipad body.classProgressApp #progressTableBox .progressActivityPreviewLine em,
  html.pe87Ipad body.classProgressApp #progressTableBox .progressActivityPreviewEmpty,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox .progressActivityPreviewLine em,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox .progressActivityPreviewEmpty{
    font-size:10.5px!important;
  }

  html.pe87Ipad body.classProgressApp #progressTableBox .progressMemoOpenBtn11620,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox .progressMemoOpenBtn11620{
    min-height:38px!important;
    padding:0 4px!important;
    font-size:10.5px!important;
  }

  html.pe87Ipad body.classProgressApp #progressTableBox #addProgressRow,
  html.pe87Ipad body.classProgressApp #progressTableBox #restoreSelectedProgressPlans,
  html.pe87Ipad body.classProgressApp #progressTableBox #deleteProgressRows,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox #addProgressRow,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox #restoreSelectedProgressPlans,
  html.pe87IpadRuntime body.classProgressApp #progressTableBox #deleteProgressRows{
    max-width:34%!important;
    padding:0 10px!important;
    font-size:10.5px!important;
  }
}

@media (min-width:769px){
  html.pe87FoldWide body.classProgressApp #app > .pe87ProgressPanel{
    padding:11px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox table.pe87ClassProgress th{
    height:43px!important;
    padding:6px 3px!important;
    font-size:9.5px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox table.pe87ClassProgress td{
    height:68px!important;
    padding:5px 3px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox table.pe87ClassProgress input.progressInput:not([type="checkbox"]),
  html.pe87FoldWide body.classProgressApp #progressTableBox table.pe87ClassProgress select.progressInput{
    height:38px!important;
    min-height:38px!important;
    padding:0 4px!important;
    font-size:9.5px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox .dateLine.dateLineInline{
    gap:4px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox .progressDatePicker,
  html.pe87FoldWide body.classProgressApp #progressTableBox .progressDateDisplay,
  html.pe87FoldWide body.classProgressApp #progressTableBox .rowReset{
    height:40px!important;
    min-height:40px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox .progressDateDisplay{
    padding:0 1px!important;
    font-size:8.75px!important;
    letter-spacing:-.25px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox .rowReset{
    flex-basis:48px!important;
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    padding:0 2px!important;
    font-size:9.5px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox .progressActivityPreview{
    min-height:50px!important;
    padding:5px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox .progressActivityPreviewLine em,
  html.pe87FoldWide body.classProgressApp #progressTableBox .progressActivityPreviewEmpty{
    font-size:9.5px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox .progressMemoOpenBtn11620{
    min-height:36px!important;
    padding:0 3px!important;
    font-size:9.5px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox .progressActions.progressActionsSpaced{
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
    min-height:60px!important;
    margin:10px!important;
    padding:9px!important;
    gap:7px!important;
  }

  html.pe87FoldWide body.classProgressApp #progressTableBox #addProgressRow,
  html.pe87FoldWide body.classProgressApp #progressTableBox #restoreSelectedProgressPlans,
html.pe87FoldWide body.classProgressApp #progressTableBox #deleteProgressRows{
    max-width:35%!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0 8px!important;
    font-size:9.5px!important;
  }
}

/* 반별 진도표 화면에서는 좌측 현재 탭을 렌더 순서와 무관하게 명확히 표시한다. */
body.classProgressApp #sideNav > .tab[data-tab="calendar"]{
  border-color:#2f455a!important;
  background:#2f455a!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(31,45,61,.16)!important;
}

body.classProgressApp #sideNav > .tab[data-tab="calendar"] .sideTabIcon{
  background:rgba(255,255,255,.14)!important;
}