/*
 * PE-Class v1.20.9 — fixed record and school-sports-club workspaces
 *
 * Record screens never scroll the document. Navigation, selectors, location,
 * titles and actions stay in the fixed workspace; only the data region owns
 * vertical scrolling. Assessment starts its scroll region at score settings.
 */

/*
 * 학교스포츠클럽은 전역 문서를 스크롤하지 않습니다.
 * 화면 제목·부서 선택·요약/부서명단/출석입력/통계달력 탭은
 * 항상 같은 위치에 두고, 탭 내용만 내부 스크롤로 이동합니다.
 */
html.peClubWorkspace,
html.peClubWorkspace body {
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.peClubWorkspace[data-pe-tab="clubs"] .pe87Main {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100dvh - var(--pe-club-main-top, 88px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--pe-club-main-top, 88px)) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.peClubWorkspace[data-pe-tab="clubs"] #app.clubScreen {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.peClubWorkspace[data-pe-tab="clubs"] #app.clubScreen > .clubHub {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

html.peClubWorkspace[data-pe-tab="clubs"] #app.clubScreen .clubHubHeader {
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  background: #fff !important;
}

html.peClubWorkspace[data-pe-tab="clubs"] #app.clubScreen .clubSectionPanels {
  display: block !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  html.peClubWorkspace[data-pe-tab="clubs"] body.mobileClubView #app.clubScreen {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html.peClubWorkspace[data-pe-tab="clubs"] body.mobileClubView #app.clubScreen > #mobileClubRoot {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html.peClubWorkspace[data-pe-tab="clubs"] body.mobileClubView .mobileClubSelector {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    background: linear-gradient(180deg, #fff, #f7fbff) !important;
  }

  html.peClubWorkspace[data-pe-tab="clubs"] body.mobileClubView #mobileClubContent {
    display: block !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

html.peRecordWorkspace,
html.peRecordWorkspace body {
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.peRecordWorkspace .pe87Main {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100dvh - var(--pe-record-main-top, 88px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--pe-record-main-top, 88px)) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.peRecordWorkspace #app {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.peRecordWorkspace #app > .peRecordStickyRegion {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

html.peRecordWorkspace #app > .peRecordDataPanel {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.peRecordWorkspace #app > .peRecordDataPanel > .tableWrap {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html.peRecordWorkspace #app > .peRecordDataPanel > .subjectPlanActions,
html.peRecordWorkspace #app > .peRecordDataPanel > .papsExportRow,
html.peRecordWorkspace #app > .peRecordDataPanel > #progressResult,
html.peRecordWorkspace #app > #papsResult,
html.peRecordWorkspace #app > .pe87Meta,
html.peRecordWorkspace #app > div[style*="height"] {
  flex: 0 0 auto !important;
}

html.peRecordWorkspace #app > .peRecordScrollableRegion {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html.peRecordWorkspace .peAssessmentScrollableRegion > .assessConfig,
html.peRecordWorkspace .peAssessmentScrollableRegion > .peRecordDataPanel {
  flex: none !important;
}

html.peRecordWorkspace .peAssessmentScrollableRegion > .peRecordDataPanel {
  overflow: visible !important;
}

html.peRecordWorkspace .peAssessmentScrollableRegion > .peRecordDataPanel > .tableWrap {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/*
 * Match the assessment score table structure: the panel owns the equal outer
 * inset, while each table fills its own rounded table box edge to edge.
 */
@media (min-width: 769px) {
  html.peRecordWorkspace body.classProgressApp #app > .pe87ProgressPanel,
  html.peRecordWorkspace body.subjectPlanApp #app > .pe87SubjectPlanPanel {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html.peRecordWorkspace #app > .peRecordDataPanel > .peRecordTableViewport {
    display: block !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  html.peRecordWorkspace #app > .peRecordDataPanel
    > .peRecordTableViewport.peRecordTableViewportPaps {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  html.peRecordWorkspace #app > .peRecordDataPanel
    > .peRecordTableViewport > .tableWrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
    overflow: clip !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  html.peRecordWorkspace #app > .papsPanel.peRecordDataPanel
    > .peRecordTableViewport > #papsTableBox {
    border: 1px solid #dbe6f0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    isolation: isolate !important;
  }

  html.peRecordWorkspace body.classProgressApp
    #progressTableBox table.pe87ClassProgress,
  html.peRecordWorkspace body.subjectPlanApp
    #subjectPlanBox table.pe87SubjectPlan {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html.peRecordWorkspace body.classProgressApp
    #progressTableBox table.pe87ClassProgress col.progressColActivity {
    width: 27% !important;
  }

  html.peRecordWorkspace body.classProgressApp
    #progressTableBox table.pe87ClassProgress col.progressColMemo {
    width: 8% !important;
  }

  html.peRecordWorkspace body.subjectPlanApp
    #subjectPlanBox table.pe87SubjectPlan col.planColActivity {
    width: 27.5% !important;
  }

  html.peRecordWorkspace body.subjectPlanApp
    #subjectPlanBox table.pe87SubjectPlan col.planColPrep {
    width: 20.5% !important;
  }

  html.peRecordWorkspace.pe87FoldWide body.classProgressApp
    #progressTableBox table.pe87ClassProgress col.progressColActivity {
    width: calc(27.5% - 18px) !important;
  }

  html.peRecordWorkspace body.subjectPlanApp
    #app > .pe87SubjectPlanPanel > .subjectPlanActions {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-right: 16px !important;
    margin-left: 16px !important;
  }

  html.peRecordWorkspace body.classProgressApp
    #app > .pe87ProgressPanel > #progressResult {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-right: 16px !important;
    margin-left: 16px !important;
  }

  html.peRecordWorkspace #subjectPlanBox table.pe87SubjectPlan thead th,
  html.peRecordWorkspace #progressTableBox table.pe87ClassProgress thead th,
  html.peRecordWorkspace #papsTableBox table.pe87Paps thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  html.peRecordWorkspace:not(.pe87FoldWide) #app > .papsPanel.peRecordDataPanel
    > .peRecordTableViewport.peRecordTableViewportPaps {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

@media (min-width: 769px) {
  /* Location is the first full-width row of the fixed header. */
  html.peRecordWorkspace #app > .peRecordStickyRegion {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    margin-bottom: 12px !important;
    padding-block: 8px !important;
    border-bottom: 1px solid #dbe4ef !important;
  }

  html.peRecordWorkspace #app > .peRecordStickyRegion > .pe87Crumb {
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 0 2px !important;
  }

  html.peRecordWorkspace #app > .pe87SubjectPlanPanel,
  html.peRecordWorkspace #app > .pe87ProgressPanel,
  html.peRecordWorkspace #app > .papsPanel {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 768px) {
  html.peRecordWorkspace .pe87Main {
    height: calc(100dvh - var(--pe-record-main-top, 126px)) !important;
    max-height: calc(100dvh - var(--pe-record-main-top, 126px)) !important;
  }

  /* Subject plan: selector and action card are fixed; lesson cards scroll. */
  body.mobileSubjectPlanView #mobileSubjectPlanSelector,
  body.mobileSubjectPlanView .mobileSubjectPlanDashboard {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
  }

  body.mobileSubjectPlanView #mobileSubjectPlanHost {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    contain: none !important;
  }

  body.mobileSubjectPlanView .mobileSubjectPlanCards {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Class progress: selector, actions and class meta never move. */
  body.mobileClassProgressView #mobileClassProgressSelector,
  body.mobileClassProgressView .mobileClassProgressStickyDashboard,
  body.mobileClassProgressView .mobileClassProgressMetaPanel {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
  }

  body.mobileClassProgressView #mobileClassProgressHost {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    contain: none !important;
  }

  body.mobileClassProgressView .mobileClassProgressCards {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* PAPS uses a sibling host. Keep its context/actions fixed and scroll detail. */
  body.mobilePapsView .pe87Main > #app {
    flex: 0 0 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.mobilePapsView #mobilePapsHost {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.mobilePapsView #mobilePapsCrumb,
  body.mobilePapsView #mobilePapsSelector,
  body.mobilePapsView #mobilePapsDashboardCard,
  body.mobilePapsView .mobilePapsExportOnly {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
  }

  body.mobilePapsView #mobilePapsStudentView {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Assessment selector and actions stay fixed; settings start the scroller. */
  body.mobileAssessmentView #mobileAssessmentSelector,
  body.mobileAssessmentView #app > .peRecordStickyRegion {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
  }

  body.mobileAssessmentView
    #app > .peRecordStickyRegion > .pe87Crumb {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    text-align: left !important;
  }

  body.mobileAssessmentView #app > .peAssessmentScrollableRegion {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* The class metadata remains a fixed non-scrolling card. */
  body.mobileClassProgressView .mobileClassProgressMetaPanel {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 56, 88, 0.08);
  }

  body.mobileClassProgressView
    .mobileClassProgressMetaPanel .mobileClassProgressMetaGrid {
    margin-bottom: 0 !important;
  }
}