/*
 * PE-Class v1.20.9 — fixed record and school-sports-club workspaces
 *
 * Wide record screens never scroll the document. Navigation, selectors,
 * location, titles and actions stay in the fixed workspace; only the data
 * region owns vertical scrolling. Compact mobile screens deliberately keep
 * their original document scroll instead.
 */

/*
 * 학교스포츠클럽은 전역 문서를 스크롤하지 않습니다.
 * 화면 제목·부서 선택·요약/부서명단/출석입력/통계달력 탭은
 * 항상 같은 위치에 두고, 탭 내용만 내부 스크롤로 이동합니다.
 */
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;
}

/*
 * Wide club manage workspace
 *
 * The manage tab is the one exception to the shared tab-panel scroller:
 * department management and roster management are parallel work areas and
 * therefore own their vertical scroll independently.  Keeping the contract
 * on the app's explicit data-club-section state avoids leaking these rules to
 * overview/attendance/statistics and makes rerenders safe.
 */
@media (min-width: 769px) {
  html.peClubWorkspace:is(.pe87Ipad,.pe87IpadRuntime,.pe87FoldWide,[data-pe-device="tablet"],[data-pe-ipados="true"],[data-pe-fold-wide="true"])[data-pe-tab="clubs"]
    #app.clubScreen[data-club-section="manage"] .clubSectionPanels {
    overflow: hidden !important;
  }

  html.peClubWorkspace:is(.pe87Ipad,.pe87IpadRuntime,.pe87FoldWide,[data-pe-device="tablet"],[data-pe-ipados="true"],[data-pe-fold-wide="true"])[data-pe-tab="clubs"]
    #app.clubScreen[data-club-section="manage"]
    .clubSectionPanel[data-club-section-panel="manage"] {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html.peClubWorkspace:is(.pe87Ipad,.pe87IpadRuntime,.pe87FoldWide,[data-pe-device="tablet"],[data-pe-ipados="true"],[data-pe-fold-wide="true"])[data-pe-tab="clubs"]
    #app.clubScreen[data-club-section="manage"] .clubManageGrid {
    align-items: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html.peClubWorkspace:is(.pe87Ipad,.pe87IpadRuntime,.pe87FoldWide,[data-pe-device="tablet"],[data-pe-ipados="true"],[data-pe-fold-wide="true"])[data-pe-tab="clubs"]
    #app.clubScreen[data-club-section="manage"]
    .clubManageGrid > :is(.clubDepartmentPanel, .clubMemberPanel) {
    box-sizing: border-box !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /*
   * Attendance keeps one outer scroll owner.  The content inset separates
   * that far-right scrollbar from the QR card border instead of creating a
   * second scrollbar on either card.
   */
  html.peClubWorkspace:is(.pe87Ipad,.pe87IpadRuntime,.pe87FoldWide,[data-pe-device="tablet"],[data-pe-ipados="true"],[data-pe-fold-wide="true"])[data-pe-tab="clubs"]
    #app.clubScreen[data-club-section="attendance"] .clubSectionPanels {
    scrollbar-gutter: stable;
  }

  html.peClubWorkspace:is(.pe87Ipad,.pe87IpadRuntime,.pe87FoldWide,[data-pe-device="tablet"],[data-pe-ipados="true"],[data-pe-fold-wide="true"])[data-pe-tab="clubs"]
    #app.clubScreen[data-club-section="attendance"]
    .clubSectionPanel[data-club-section-panel="attendance"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-inline-end: 12px !important;
  }
}

@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;
}

/*
 * One explicit vertical-scroll contract shared by MacBook, iPad landscape and
 * Fold7 wide.  Do not infer the owner from incidental overflow declarations:
 * the runtime marks it after every screen rebuild.  flex-basis:0 constrains the
 * pane without WebKit's brittle `height:0 + overflow:auto` combination.
 */
@media (min-width: 769px) {
  html.peRecordWorkspace [data-pe-record-scroll-owner] {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  html.peRecordWorkspace #app > .peRecordDataPanel
    > .peRecordTableViewport[data-pe-record-scroll-owner],
  html.peRecordWorkspace #app
    > .peRecordScrollableRegion[data-pe-record-scroll-owner] {
    flex: 1 1 0 !important;
    flex-basis: 0 !important;
    height: auto !important;
    max-height: 100% !important;
  }

  html.peRecordWorkspace[data-pe-tab="students"] #app.studentScreen
    > .studentSplit[data-pe-record-student-layout] {
    display: grid !important;
    flex: 1 1 0 !important;
    flex-basis: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  html.peRecordWorkspace[data-pe-tab="students"] #app.studentScreen
    > .studentSplit[data-pe-record-student-layout] > .list,
  html.peRecordWorkspace[data-pe-tab="students"] #app.studentScreen
    > .studentSplit[data-pe-record-student-layout] #studentDetail,
  html.peRecordWorkspace[data-pe-tab="students"] #app.studentScreen
    > .studentSplit[data-pe-record-student-layout] #studentDetail:has(.studentDetailHero) {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  html.peRecordWorkspace[data-pe-tab="students"] #app.studentScreen
    > .studentSplit[data-pe-record-student-layout] #studentList,
  html.peRecordWorkspace[data-pe-tab="students"] #app.studentScreen
    > .studentSplit[data-pe-record-student-layout] #studentDetail {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

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: auto !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;
  }
}

/* Match the assessment header's five-button rhythm to the six-button PAPS rail. */
@media (min-width: 1000px) and (orientation: landscape) {
  html.peRecordWorkspace[data-pe-foundation][data-pe-tab="assessment"]:not(.pe87FoldWide):not([data-pe-fold-wide="true"])
    #app > .peRecordStickyRegion:has(#assessMissingStudentsBtn) > .row {
    gap: 5px !important;
  }
}

@media (max-width: 768px) {
  /*
   * 방향 전환 또는 탭 교체 직후 peRecordWorkspace/pe87FoldWide가 한 프레임
   * 남아도 모바일 문서가 잠기지 않게 한다. JS 정리 전에도 페이지 전체가
   * 세로 스크롤의 유일한 소유자이며 내부 표·카드에는 별도 스크롤을 만들지 않는다.
   */
  html.peRecordWorkspace,
  html.peRecordWorkspace body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  html.peRecordWorkspace .pe87Main,
  html.peRecordWorkspace #app {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.peRecordWorkspace #app > .peRecordStickyRegion,
  html.peRecordWorkspace #app > .peRecordDataPanel,
  html.peRecordWorkspace #app > .peRecordScrollableRegion,
  html.peRecordWorkspace #app > .peRecordDataPanel > .tableWrap,
  html.peRecordWorkspace #app > .peRecordDataPanel > .peRecordTableViewport {
    position: relative !important;
    top: auto !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Keep only the class metadata card's visual treatment on compact mobile.
   * Mobile record screens use the normal document scroll and must not inherit
   * any fixed-height, flex scroll-owner or overflow-lock rules from desktop. */
  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;
  }
}

/*
 * Fold7 folded / phone scroll invariant.
 *
 * Compact record and student screens always use the document as their single
 * vertical scroll owner.  The selector intentionally excludes every live
 * modal lock, so a real bottom sheet still freezes the page while an orphaned
 * desktop/fold workspace class can never clip the mobile document again.
 */
@media (max-width: 768px) {
  html.peCompactRecordNatural:not(:has(body:is(
    .mobileProgressPickerOpen,
    .mobileAssessPickerOpen,
    .mobileStudentPickerOpen,
    .classProgressDateConfirmOpen11663,
    .foldPapsDetailOpen
  ))),
  html.peCompactRecordNatural:not(:has(body:is(
    .mobileProgressPickerOpen,
    .mobileAssessPickerOpen,
    .mobileStudentPickerOpen,
    .classProgressDateConfirmOpen11663,
    .foldPapsDetailOpen
  ))) body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }

  html.peCompactRecordNatural :is(
    .pe87Main,
    #app,
    #app.studentScreen,
    #mobileSubjectPlanHost,
    #mobileClassProgressHost,
    #mobilePapsHost,
    #mobileAssessmentStudentCard,
    .peAssessmentScrollableRegion,
    .studentSplit,
    #studentDetail
  ) {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }
}