/*
 * PE-Class school sports club screen boundary v11685
 * ---------------------------------------------------
 * 학교스포츠클럽의 기존 데이터/API/DOM은 유지하면서 이 화면이 소유하는
 * 폭·스크롤·모달 경계만 명시합니다. 기기별 상세 배치는 검증된 기존
 * mobile-clubs/desktop-clubs 규칙을 그대로 사용합니다.
 */

html[data-pe-tab="clubs"] #app.clubScreen,
html[data-pe-tab="clubs"] #app.clubScreen *,
html[data-pe-tab="clubs"] #app.clubScreen *::before,
html[data-pe-tab="clubs"] #app.clubScreen *::after {
  box-sizing: border-box;
}

html[data-pe-tab="clubs"] #app.clubScreen {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

html[data-pe-tab="clubs"] #app.clubScreen > .pe87Crumb,
html[data-pe-tab="clubs"] #app.clubScreen > .pe87PageHead,
html[data-pe-tab="clubs"] #app.clubScreen > .clubPcTopGrid,
html[data-pe-tab="clubs"] #app.clubScreen > .panel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubPcTopGrid,
html[data-pe-tab="clubs"] #app.clubScreen .clubPcTopCard,
html[data-pe-tab="clubs"] #app.clubScreen .clubPcTopCard > *,
html[data-pe-tab="clubs"] #app.clubScreen #clubMemberBox,
html[data-pe-tab="clubs"] #app.clubScreen #clubAttendanceBox,
html[data-pe-tab="clubs"] #app.clubScreen #clubStatsBox,
html[data-pe-tab="clubs"] #app.clubScreen #clubCalendarBox,
html[data-pe-tab="clubs"] #app.clubScreen .tableScroll,
html[data-pe-tab="clubs"] #app.clubScreen .tableWrap {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubPcTopGrid {
  width: 100% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTable,
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceTable,
html[data-pe-tab="clubs"] #app.clubScreen .clubStatsTable {
  max-width: 100% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubMemberSequenceBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eaf4fd;
  color: #2a6799;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 769px) {
  html[data-pe-tab="clubs"] #app.clubScreen .clubMemberPanel .clubMemberTable {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTable col.clubColSequence { width: 48px !important; }
  html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTable col.clubColGrade { width: 48px !important; }
  html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTable col.clubColClass { width: 48px !important; }
  html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTable col.clubColNumber { width: 48px !important; }
  html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTable col.clubColName { width: auto !important; }
  html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTable col.clubColGender { width: 48px !important; }
  html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTable col.clubColManage { width: 112px !important; }

  html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTable th,
  html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTable td {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel .formGrid > label:nth-child(2) > .label,
  html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel .formGrid > label:nth-child(3) > .label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel #clubQrSlot,
  html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel #clubQrMember {
    padding-left: 22px !important;
    padding-right: 22px !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel #clubQrSlot option,
  html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel #clubQrMember option {
    text-align: center;
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel #clubQrDate {
    position: relative !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 32px !important;
    line-height: 1 !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel #clubQrDate::-webkit-calendar-picker-indicator {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    margin: 0 !important;
    padding: 2px !important;
    transform: translateY(-50%) !important;
  }
}

/* QR 출석 날짜 값은 데스크톱·태블릿·모바일에서 입력칸 정중앙에 표시합니다. */
html[data-pe-tab="clubs"] :is(#clubQrDate, #mobileClubQrDate) {
  text-align: center !important;
  text-align-last: center !important;
}

html[data-pe-tab="clubs"] :is(#clubQrDate, #mobileClubQrDate)::-webkit-date-and-time-value,
html[data-pe-tab="clubs"] :is(#clubQrDate, #mobileClubQrDate)::-webkit-datetime-edit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

html[data-pe-tab="clubs"] :is(#clubQrDate, #mobileClubQrDate)::-webkit-datetime-edit-fields-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubPcTopCard input,
html[data-pe-tab="clubs"] #app.clubScreen .clubPcTopCard select,
html[data-pe-tab="clubs"] #app.clubScreen .clubPcTopCard textarea,
html[data-pe-tab="clubs"] #app.clubScreen .attendanceControls input,
html[data-pe-tab="clubs"] #app.clubScreen .attendanceControls select,
html[data-pe-tab="clubs"] #app.clubScreen .attendanceControls button {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubMemberTableWrap,
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendancePanel > .tableScroll,
html[data-pe-tab="clubs"] #app.clubScreen #clubStatsBox > .tableScroll {
  overscroll-behavior: contain;
}

/*
 * 출석 달력 모달은 #app 안이 아니라 document.body 바로 아래에 생성됩니다.
 * body 자체를 fixed + 음수 top으로 이동하던 기존 잠금은 Safari에서 모달까지
 * 화면 밖으로 밀어냈습니다. 문서 스크롤만 잠그고 모달은 뷰포트에 고정합니다.
 */
html[data-pe-tab="clubs"] body.clubCalModalOpen {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
}

/*
 * 이전 버전의 fixed-body 잠금 클래스가 한 프레임 남더라도 문서의
 * 스크롤 위치가 0으로 재계산되지 않게 합니다. 실제 배경 스크롤 차단은
 * app-11609.js의 모달 전용 wheel/touchmove guard가 담당합니다.
 */
html[data-pe-tab="clubs"].clubCalModalOpen,
html[data-pe-tab="clubs"] body.clubCalModalOpen {
  overflow: visible !important;
  overscroll-behavior: auto !important;
}

html[data-pe-tab="clubs"] body > #clubCalModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 25000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  overflow: auto !important;
  overscroll-behavior: none !important;
}

html[data-pe-tab="clubs"] body > #clubCalModal > .modalCard {
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

/*
 * Fold 펼침 화면: 달력의 표시 셀과 실제 hit box를 같은 7열 격자로
 * 고정하고, 조상에 남아 있던 pan-y 제한은 이 화면 안에서만 해제합니다.
 */
html.pe87FoldWide[data-pe-tab="clubs"] body,
html.pe87FoldWide[data-pe-tab="clubs"] .pe87Shell,
html.pe87FoldWide[data-pe-tab="clubs"] .pe87Main,
html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen,
html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen > .panel,
html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox {
  touch-action: auto !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalDay[data-club-date],
html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/*
 * Fold 펼침 화면의 달력은 날짜 하나를 기본 button 하나로 렌더링합니다.
 * 스크롤 중 pointer/touch 취소 신호를 직접 해석하지 않고 브라우저의
 * 기본 click 판정만 사용하므로 마지막 행도 다른 행과 동일하게 동작합니다.
 */
html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .foldClubCalDay {
  padding: 0 !important;
  overflow: hidden !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .foldClubCalendarButton {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 88px !important;
  padding: 10px !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  touch-action: pan-y !important;
  -webkit-tap-highlight-color: transparent !important;
}

#clubCalendarBox .foldClubCalendarButton,
#clubCalendarBox .foldClubCalendarButton *,
#clubCalendarBox .foldClubCalDay,
#clubCalendarBox .foldClubCalDay * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

#clubCalendarBox .foldClubCalendarButton::selection,
#clubCalendarBox .foldClubCalendarButton *::selection,
#clubCalendarBox .foldClubCalDay::selection,
#clubCalendarBox .foldClubCalDay *::selection {
  background: transparent !important;
  color: inherit !important;
}

#clubCalendarBox .foldClubCalendarButton:focus,
#clubCalendarBox .foldClubCalendarButton:focus-visible,
#clubCalendarBox .foldClubCalendarButton:active {
  outline: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;
  transform: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .foldClubCalendarButton > b {
  display: block !important;
  margin: 0 0 6px !important;
  pointer-events: none !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .foldClubCalendarButton .clubCalEvents {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .foldClubCalendarButton .clubCalBadge {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge > .foldClubCalDepartment,
html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge > .foldClubCalTime,
html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge > .foldClubCalHeadcount {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge > .foldClubCalDepartment {
  font-weight: 900 !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge > .foldClubCalHeadcount,
html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge > .foldClubCalHeadcount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
  margin-top: 3px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #168ee0 !important;
  color: #fff !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-overflow: clip !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge > small {
  display: none !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .foldClubCalendarButton .clubCalEmpty {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  min-height: 44px !important;
  pointer-events: none !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalWeek,
html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalGrid {
  width: 100% !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalDay,
html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalEvents,
html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge {
  min-width: 0 !important;
  max-width: 100% !important;
}

#clubCalendarBox .clubCalEmptyButton {
  width: 100%;
  min-height: 44px;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/*
 * Samsung Internet의 하단 도구막대가 달력 마지막 행 위에 겹쳐도
 * 마지막 날짜와 일정 배지를 위로 충분히 스크롤할 수 있는 여유 공간입니다.
 */
html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen > .panel:last-child {
  margin-bottom: max(128px, env(safe-area-inset-bottom)) !important;
}

/*
 * Fold7 펼침 화면 — 기록 없는 출석 달력 칸.
 * 날짜 버튼 자체의 터치 범위는 유지하되, 하늘색 안내 영역만 기록이
 * 있는 칸의 절반 높이로 줄이고 문구를 정확히 중앙에 배치한다.
 */
html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .foldClubCalendarButton.isEmpty .clubCalEvents,
html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #clubCalendarBox .foldClubCalendarButton.isEmpty .clubCalEvents {
  display: flex !important;
  flex: 0 0 44px !important;
  min-height: 44px !important;
  margin: auto 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: #eef8ff !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #clubCalendarBox .foldClubCalendarButton.isEmpty .clubCalEmpty,
html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #clubCalendarBox .foldClubCalendarButton.isEmpty .clubCalEmpty {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

/*
 * 출석 달력 상세 모달 — PC/Mac/iPad.
 * 카드가 화면의 75% 높이를 넘지 않게 하고 표 부분만 내부 스크롤한다.
 * 배경 위치와 무관하게 항상 뷰포트 정중앙에 배치한다.
 */
@media (min-width: 769px) {
  html[data-pe-tab="clubs"] body > #clubCalModal {
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html[data-pe-tab="clubs"] body > #clubCalModal > .clubCalAttendanceModalCard {
    width: min(720px, calc(100vw - 32px)) !important;
    max-height: 75dvh !important;
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /*
   * PC/Mac/iPad의 날짜별 출석입력 모달은 학생명·상태·메모를
   * 충분히 확인할 수 있도록 넓히되 Fold7 전용 크기는 유지합니다.
   */
  html:not(.pe87FoldWide):not([data-pe-fold-wide="true"])[data-pe-tab="clubs"] body > #clubCalModal > .clubCalAttendanceModalCard {
    width: min(960px, calc(100vw - 48px)) !important;
    min-height: min(640px, calc(100dvh - 48px)) !important;
    max-height: calc(100dvh - 48px) !important;
  }

  html[data-pe-tab="clubs"] #clubCalModal .clubCalAttendanceTableWrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }

  html[data-pe-tab="clubs"] #clubCalModal .clubCalAttendanceTable th,
  html[data-pe-tab="clubs"] #clubCalModal .clubCalAttendanceTable td {
    vertical-align: middle !important;
  }

  html[data-pe-tab="clubs"] #clubCalModal .clubCalEditStatus,
  html[data-pe-tab="clubs"] #clubCalModal .clubCalEditMemo {
    height: 38px !important;
    min-height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: normal !important;
    vertical-align: middle !important;
  }

  html[data-pe-tab="clubs"] #clubCalModal .clubCalEditStatus {
    text-align: center !important;
    text-align-last: center !important;
  }
}

/*
 * Fold7 펼침 화면에서는 기존 카드의 가로·세로 크기를 모두 약 3/4로
 * 제한한다. 일반 PC/Mac/iPad의 너비에는 영향을 주지 않는다.
 */
@media (min-width: 769px) and (max-width: 1200px) {
  html.pe87FoldWide[data-pe-tab="clubs"] body > #clubCalModal > .clubCalAttendanceModalCard,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] body > #clubCalModal > .clubCalAttendanceModalCard {
    width: min(540px, 75vw) !important;
    max-width: 75vw !important;
    max-height: 75dvh !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #clubCalModal col.clubCalAttendanceStudentCol,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #clubCalModal col.clubCalAttendanceStudentCol {
    width: 34% !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #clubCalModal col.clubCalAttendanceStatusCol,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #clubCalModal col.clubCalAttendanceStatusCol {
    width: 30% !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #clubCalModal col.clubCalAttendanceMemoCol,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #clubCalModal col.clubCalAttendanceMemoCol {
    width: 36% !important;
  }
}

/*
 * iPad: 출석 달력의 날짜/일정 버튼에만 Safari 기본 파란 탭·선택
 * 하이라이트를 제거합니다. 입력 필드와 다른 탭의 선택 동작은 유지합니다.
 */
html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] #clubCalendarBox .clubCalDay[data-club-date],
html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] #clubCalendarBox .clubCalDay[data-club-date]::selection,
html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge::selection,
html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] #clubCalendarBox .clubCalDay[data-club-date] *::selection,
html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] #clubCalendarBox .clubCalBadge *::selection {
  background: transparent !important;
}

html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] #clubCalendarBox .clubCalEmptyButton {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/*
 * Fold 펼침 화면의 통계 제어줄은 DOM 순서 그대로
 * 통계 년월 → 통계 조회 → 부서 출석률을 한 줄에 둡니다.
 */
html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen #clubStatsBox > .row {
  display: grid !important;
  grid-template-columns: minmax(170px, 230px) max-content max-content !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 8px !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen #clubStatsBox > .row > #clubStatMonth {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen #clubStatsBox > .row > #loadClubStatsBtn {
  grid-column: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen #clubStatsBox > .row > .hint {
  grid-column: 3 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

html[data-pe-tab="clubs"] #app.clubScreen #clubStatsBox .clubStatMonthNavigator {
  gap: 6px !important;
  max-width: 100% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen #clubStatsBox .clubStatMonthNavigator .clubStatMonthShift {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen #clubStatsBox .clubStatMonthNavigator .monthPickerButton {
  min-width: 170px !important;
}

html[data-pe-tab="clubs"] #app.clubScreen #clubCalendarBox .clubCalendarMonthHeader {
  align-items: center !important;
  gap: 10px !important;
}

html[data-pe-tab="clubs"] #app.clubScreen #clubCalendarBox .clubCalendarMonthNavigator {
  gap: 6px !important;
  max-width: 100% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen #clubCalendarBox .clubCalendarMonthShift {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen #clubCalendarBox .clubCalendarMonthNavigator .monthPickerButton {
  min-width: 170px !important;
}

/*
 * Fold7 펼침 화면의 QR 입력 비율만 조정합니다.
 * 날짜는 유지하고 시간대를 조금 넓히며 학생명 영역은 같은 만큼 줄입니다.
 */
html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel .formGrid,
html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen .clubQrPanel .formGrid {
  grid-template-columns: minmax(180px, 0.85fr) minmax(140px, 0.65fr) minmax(260px, 1.5fr) !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel #clubQrSlot,
html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen .clubQrPanel #clubQrSlot {
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  line-height: 46px !important;
  text-align: center !important;
  text-align-last: center !important;
  vertical-align: middle !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #52677d 50%),
    linear-gradient(135deg, #52677d 50%, transparent 50%) !important;
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel #clubQrMember,
html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen .clubQrPanel #clubQrMember {
  padding-left: 14px !important;
  padding-right: 28px !important;
}

/* 클럽 탭을 떠난 직후 한 프레임 동안 남을 수 있는 모바일 host를 숨깁니다. */
html:not([data-pe-tab="clubs"]) #mobileClubRoot,
html:not([data-pe-tab="clubs"]) #mobileClubPickerSheet,
html:not([data-pe-tab="clubs"]) #mobileClubImportSheet,
html:not([data-pe-tab="clubs"]) #mobileClubDetailSheet {
  display: none !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  html[data-pe-tab="clubs"] body.mobileClubView #app.clubScreen {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen > #mobileClubRoot {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-pe-tab="clubs"] #mobileClubRoot .mobileClubIpadMonthNavigator {
    display: grid !important;
    grid-template-columns: 44px minmax(150px, 1fr) 44px !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html[data-pe-tab="clubs"] #mobileClubRoot .mobileClubIpadMonthNavigator > button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 8px !important;
  }

  html[data-pe-tab="clubs"] #mobileClubRoot .mobileClubIpadMonthNavigator > .mobileClubMonthDisplay {
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-weight: 850 !important;
    text-align: center !important;
  }

  /*
   * 출석률 숫자는 설명 두 행의 오른쪽 영역 전체를 사용해 카드의
   * 상하 중앙에 놓습니다.
   */
  html[data-pe-tab="clubs"] body.mobileClubView .mobileClubOverallStats {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "label rate"
      "detail rate" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
  }

  html[data-pe-tab="clubs"] body.mobileClubView .mobileClubOverallStats > div {
    display: contents !important;
  }

  html[data-pe-tab="clubs"] body.mobileClubView .mobileClubOverallStats > div > span {
    grid-area: label !important;
    align-self: end !important;
  }

  html[data-pe-tab="clubs"] body.mobileClubView .mobileClubOverallStats > div > b {
    grid-area: rate !important;
    align-self: center !important;
    justify-self: end !important;
  }

  html[data-pe-tab="clubs"] body.mobileClubView .mobileClubOverallStats > p {
    grid-area: detail !important;
    align-self: start !important;
  }

  html[data-pe-tab="clubs"] body.mobileClubView .mobileClubMemberNameButton,
  html[data-pe-tab="clubs"] body.mobileClubView .mobileClubMemberActions > button {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }
}