/*
 * PE-Class v1.17.63 — 학교스포츠클럽 통합 허브
 * 기존 전역 셸과 API는 유지하고 #app.clubScreen 내부 정보 구조만 재배치합니다.
 */

html[data-pe-tab="clubs"] #app.clubScreen {
  --club-hub-gap: 10px;
  --club-hub-radius: 14px;
  --club-hub-border: #d8e4ef;
  --club-hub-navy: #17324d;
  --club-hub-blue: #168ee0;
  --club-hub-soft: #f3f8fd;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHub,
html[data-pe-tab="clubs"] #app.clubScreen .clubSectionPanels,
html[data-pe-tab="clubs"] #app.clubScreen .clubSectionPanel {
  display: grid;
  min-width: 0;
  gap: var(--club-hub-gap);
}

html[data-pe-tab="clubs"] #app.clubScreen [hidden] {
  display: none !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHub > .panel,
html[data-pe-tab="clubs"] #app.clubScreen .clubSectionPanel > .panel,
html[data-pe-tab="clubs"] #app.clubScreen .clubManageGrid > .panel {
  margin: 0 !important;
  padding: 14px !important;
  border-color: var(--club-hub-border) !important;
  border-radius: var(--club-hub-radius) !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHubHeader {
  display: grid;
  gap: 12px;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHubTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--club-hub-gap);
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHubTitle > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHubTitle > div:first-child > span {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #e9f5ff;
  color: var(--club-hub-blue);
  font-size: 22px;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHubTitle h2,
html[data-pe-tab="clubs"] #app.clubScreen .clubPanelTitle h3,
html[data-pe-tab="clubs"] #app.clubScreen .clubManageGrid h3 {
  margin: 0 !important;
  color: var(--club-hub-navy);
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHubTitle h2 {
  font-size: 22px;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHubTitle p,
html[data-pe-tab="clubs"] #app.clubScreen .clubPanelTitle p {
  margin: 3px 0 0;
  color: #687b8f;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHubHeaderActions {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(112px, .55fr);
  gap: var(--club-hub-gap);
  min-width: min(430px, 44%);
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHubHeaderActions label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 !important;
  color: #526579;
  font-size: 12px;
  font-weight: 900;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubHubHeaderActions select,
html[data-pe-tab="clubs"] #app.clubScreen .clubHubHeaderActions .btn {
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  margin: 0;
  text-align: center;
  text-align-last: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubSectionTabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--club-hub-gap);
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubSectionTabs > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 5px;
  border: 1px solid #cbd9e6;
  border-radius: 10px;
  background: #fff;
  color: #31516f;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubSectionTabs > button.active {
  border-color: var(--club-hub-blue);
  background: var(--club-hub-blue);
  color: #fff;
  box-shadow: 0 5px 12px rgba(22, 142, 224, .2);
}

html[data-pe-tab="clubs"] #app.clubScreen .clubPanelTitle {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  text-align: center;
}

/* 요약 */
html[data-pe-tab="clubs"] #app.clubScreen #clubOverviewBox {
  display: grid;
  gap: var(--club-hub-gap);
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewEmpty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 260px;
  padding: 20px;
  border: 1px solid var(--club-hub-border);
  border-radius: var(--club-hub-radius);
  background: #fff;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewEmpty > span {
  font-size: 38px;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewEmpty p {
  margin: 0;
  color: #6b7f92;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewTopline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--club-hub-gap);
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--club-hub-border);
  border-radius: 12px;
  background: #fff;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewTopline > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewTopline span,
html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewTopline small {
  color: #63788e;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewTopline strong {
  color: var(--club-hub-navy);
  font-size: 16px;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--club-hub-gap);
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewMetrics article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 9px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--club-hub-border);
  border-radius: 13px;
  background: #fff;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewMetrics article > span {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewMetrics .blue { background: #218af0; }
html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewMetrics .green { background: #26b96b; }
html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewMetrics .cyan { background: #21b9b7; }
html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewMetrics .orange { background: #f49a21; }

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewMetrics small {
  color: #65788c;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewMetrics strong {
  color: var(--club-hub-navy);
  font-size: 22px;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewMetrics em {
  color: #52677b;
  font-size: 12px;
  font-style: normal;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewBody {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: var(--club-hub-gap);
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewCard {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--club-hub-border);
  border-radius: var(--club-hub-radius);
  background: #fff;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewCard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--club-hub-gap);
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewCard h3,
html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewCard p {
  margin: 0;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewCard h3 { color: var(--club-hub-navy); }
html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewCard p { margin-top: 3px; color: #718397; font-size: 11px; }
html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewCard > header > strong { color: #168ee0; font-size: 24px; }

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewRate,
html[data-pe-tab="clubs"] #app.clubScreen .clubStatsRateTrack {
  height: 9px;
  margin: 13px 0;
  overflow: hidden;
  border-radius: 999px;
  background: #e4edf5;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewRate > span,
html[data-pe-tab="clubs"] #app.clubScreen .clubStatsRateTrack > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #21b86a;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewStatus {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewStatus > span {
  display: grid;
  gap: 3px;
  padding: 9px 4px;
  border: 1px solid #e1e9f1;
  border-radius: 9px;
  background: #f9fbfd;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewStatus small { color: #687c90; font-size: 10px; }
html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewStatus b { color: var(--club-hub-navy); }

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewRecent {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewRecent > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid #dce7f1;
  border-radius: 9px;
  background: #fff;
  color: var(--club-hub-navy);
  text-align: center;
  cursor: pointer;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewRecent span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewRecent small { color: #6f8193; }
html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewRecent strong { color: #15934f; white-space: nowrap; }

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewActions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--club-hub-gap);
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewActions > button,
html[data-pe-tab="clubs"] #app.clubScreen .mobileClubOverviewActions > button {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #cbd9e6;
  border-radius: 10px;
  background: #fff;
  color: #31516f;
  font: inherit;
  font-weight: 900;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubOverviewActions > button.primary {
  border-color: var(--club-hub-blue);
  background: var(--club-hub-blue);
  color: #fff;
}

/* 부서·명단 */
html[data-pe-tab="clubs"] #app.clubScreen .clubManageGrid {
  display: grid;
  grid-template-columns: minmax(250px, .7fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--club-hub-gap);
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubDepartmentCreateRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(104px, .7fr);
  gap: var(--club-hub-gap) !important;
  margin: 10px 0 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubDepartmentCreateRow > * {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  margin: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubDeptList {
  display: grid;
  gap: 7px;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubDept {
  width: 100%;
  min-width: 0;
  padding: 10px;
  text-align: center !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubDept > b,
html[data-pe-tab="clubs"] #app.clubScreen .clubDept > span {
  text-align: center !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubMemberPanel #clubMemberBox {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubMemberHead {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .75fr);
  align-items: center !important;
  gap: var(--club-hub-gap) !important;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubDepartmentHeadActions,
html[data-pe-tab="clubs"] #app.clubScreen .clubMemberQuickActions {
  display: grid !important;
  gap: var(--club-hub-gap) !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubDepartmentHeadActions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-pe-tab="clubs"] #app.clubScreen .clubMemberQuickActions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 10px 0 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubDepartmentHeadActions > .btn,
html[data-pe-tab="clubs"] #app.clubScreen .clubMemberQuickActions > .btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 7px 5px !important;
  text-align: center !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .dataTable th,
html[data-pe-tab="clubs"] #app.clubScreen .dataTable td,
html[data-pe-tab="clubs"] #app.clubScreen .dataTable input,
html[data-pe-tab="clubs"] #app.clubScreen .dataTable select,
html[data-pe-tab="clubs"] #app.clubScreen .dataTable button {
  text-align: center !important;
  text-align-last: center !important;
  vertical-align: middle !important;
}

/* 출석 */
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceToolbar {
  display: grid;
  grid-template-columns: minmax(320px, 2fr) minmax(360px, 3fr);
  gap: var(--club-hub-gap);
  align-items: end;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceSelectors,
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceBulkActions {
  display: grid;
  gap: var(--club-hub-gap);
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceSelectors {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceBulkActions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceSelectors label {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0 !important;
  color: #53677b;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubDatePickerButton,
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceSelectors select,
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceBulkActions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  margin: 0;
  border: 1px solid #cbd7e3;
  border-radius: 9px;
  text-align: center;
  text-align-last: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubDatePickerButton {
  background: #fff;
  color: #253c52;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--club-hub-gap);
  margin: 10px 0 8px;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--club-hub-soft);
  color: #526a80;
  font-size: 12px;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceSummary strong { color: #1378bc; }
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceTable { width: 100% !important; min-width: 0 !important; table-layout: fixed; }
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceNoCol { width: 54px; }
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceStudentCol { width: 34%; }
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceStatusCol { width: 16%; }
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceMemoCol { width: auto; }
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceRateCol { width: 13%; }
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceTable input,
html[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceTable select { width: 100% !important; min-width: 0 !important; }

/* QR */
html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel .formGrid {
  display: grid !important;
  grid-template-columns: minmax(180px, .8fr) minmax(180px, .8fr) minmax(280px, 1.4fr) !important;
  gap: var(--club-hub-gap) !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel .formGrid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel .formGrid input,
html[data-pe-tab="clubs"] #app.clubScreen .clubQrPanel .formGrid select {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  text-align: center !important;
  text-align-last: center !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubQrActions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--club-hub-gap) !important;
  margin: 10px 0 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubQrActions > .btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen #qrLinkBox {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* 통계 */
html[data-pe-tab="clubs"] #app.clubScreen .clubStatsToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--club-hub-gap);
  margin-bottom: 10px;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubStatsToolbar .hint { text-align: center; }

html[data-pe-tab="clubs"] #app.clubScreen .clubStatsMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--club-hub-gap);
}

html[data-pe-tab="clubs"] #app.clubScreen .clubStatsMetrics article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 8px;
  border: 1px solid #dce7f1;
  border-radius: 11px;
  background: #f9fbfd;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubStatsMetrics span { color: #63778b; font-size: 11px; font-weight: 850; }
html[data-pe-tab="clubs"] #app.clubScreen .clubStatsMetrics strong { color: #1479bc; font-size: 19px; }
html[data-pe-tab="clubs"] #app.clubScreen .clubStatsTable { width: 100% !important; min-width: 760px; }
html[data-pe-tab="clubs"] #app.clubScreen .clubStatsStudent { white-space: nowrap; }

/* 달력 */
html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarMonthHeader {
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) 100px;
  gap: var(--club-hub-gap);
  align-items: center;
  margin-bottom: 10px;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarMonthNavigator {
  display: grid !important;
  grid-template-columns: 46px minmax(170px, 1fr) 46px;
  gap: var(--club-hub-gap) !important;
  width: 100%;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarMonthNavigator > *,
html[data-pe-tab="clubs"] #app.clubScreen #clubCalendarToday {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  margin: 0 !important;
  text-align: center !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  align-items: start;
  gap: var(--club-hub-gap);
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarMain {
  min-width: 0;
  margin: 0 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalDay {
  min-width: 0;
  min-height: 112px !important;
  padding: 6px;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalDay.selected {
  box-shadow: inset 0 0 0 2px #4ba8e8;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalDay > b,
html[data-pe-tab="clubs"] #app.clubScreen .clubCalDay button,
html[data-pe-tab="clubs"] #app.clubScreen .clubCalBadge,
html[data-pe-tab="clubs"] #app.clubScreen .clubCalBadge * {
  text-align: center !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalBadge {
  display: grid !important;
  place-items: center;
  gap: 2px !important;
  width: 100%;
  min-width: 0;
  padding: 5px 4px !important;
  border-color: #bce7cb !important;
  background: #f2fbf5 !important;
  color: #176b3a !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .foldClubCalDepartment,
html[data-pe-tab="clubs"] #app.clubScreen .foldClubCalTime,
html[data-pe-tab="clubs"] #app.clubScreen .foldClubCalHeadcount {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-pe-tab="clubs"] #app.clubScreen .foldClubCalDepartment { color: #23405a; font-weight: 900; }
html[data-pe-tab="clubs"] #app.clubScreen .foldClubCalTime { color: #60778c; font-size: 10px; font-weight: 800; }
html[data-pe-tab="clubs"] #app.clubScreen .foldClubCalHeadcount {
  padding: 3px 4px;
  border-radius: 999px;
  background: #20b666;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
}

html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen #clubCalendarBox .clubCalBadge > .foldClubCalHeadcount,
html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen #clubCalendarBox .clubCalBadge > .foldClubCalHeadcount {
  background: #12b76a !important;
  color: #fff !important;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummary {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--club-hub-border);
  border-radius: 12px;
  background: #f9fbfd;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummary header span,
html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummary header h4 {
  display: block;
  margin: 0;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummary header span { color: #6d8093; font-size: 11px; font-weight: 850; }
html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummary header h4 { margin-top: 4px; color: var(--club-hub-navy); font-size: 15px; }

html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummaryMetrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummaryMetrics span {
  display: grid;
  gap: 3px;
  padding: 8px 3px;
  border-radius: 8px;
  background: #fff;
  color: #61768a;
  font-size: 10px;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummaryMetrics b { color: var(--club-hub-navy); font-size: 14px; }
html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummaryEvents { display: grid; gap: 7px; }
html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSideEvent { min-height: 62px; }

/* 날짜 선택 및 스포츠클럽 모달 */
html.clubMemberActionModalOpen,
html.clubMemberActionModalOpen body,
body.clubMemberActionModalOpen {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.clubMemberActionModalOpen body[data-pe-f-scroll-lock="true"] {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
}

body > #clubDateSelectModal,
body > #clubMonthSelectModal,
body > .clubMemberActionModal,
body > #clubMemberEditModal,
body > #clubImportModal {
  position: fixed !important;
  inset: 0 !important;
}

body > :is(
  #clubDateSelectModal,
  #clubMonthSelectModal,
  .clubMemberActionModal,
  #clubMemberEditModal,
  #clubImportModal
) :is(.calDialog, .modalCard, .clubImportModalPanel) {
  touch-action: pan-y;
}

#clubDateSelectModal,
#clubMonthSelectModal {
  z-index: 25000;
  overscroll-behavior: none;
}

#clubDateSelectModal .clubDateSelectDialog {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

#clubDateSelectModal .clubDateSelectHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: center;
}

#clubDateSelectModal .clubDateSelectHead h3,
#clubDateSelectModal .clubDateSelectHead p {
  margin: 0;
  text-align: center;
}

#clubDateSelectModal .clubDateSelectHead p { margin-top: 3px; color: #6d8093; font-size: 11px; }

#clubDateSelectModal .clubDateMonthNav {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 8px;
  margin: 14px 0 9px;
}

#clubDateSelectModal .clubDateMonthNav > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  text-align: center;
}

#clubDateSelectModal .clubDateWeek,
#clubDateSelectModal .clubDateGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

#clubDateSelectModal .clubDateWeek span {
  padding: 6px 2px;
  color: #64798d;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

#clubDateSelectModal .clubDateChoice {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #d4e0eb;
  border-radius: 8px;
  background: #fff;
  color: #274158;
  font: inherit;
  font-weight: 850;
  text-align: center;
  cursor: pointer;
}

#clubDateSelectModal .clubDateChoice.empty,
#clubDateSelectModal .clubDateChoice.isEmpty {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

#clubDateSelectModal .clubDateChoice.today { border-color: #62afe4; }
#clubDateSelectModal .clubDateChoice.active { border-color: var(--club-hub-blue, #168ee0); background: var(--club-hub-blue, #168ee0); color: #fff; }
#clubDateSelectModal .clubDateToday { width: 100%; min-height: 42px; margin-top: 10px; text-align: center; }

/* Windows PC·MacBook·iPad 가로 공통 통합 구성 */
html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubSectionTabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubDepartmentCreateRow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  place-items: center;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubDepartmentCreateRow #addClubBtn {
  grid-column: 1 / -1;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberHead {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberQuickActions {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberQuickActions > .btn {
  min-height: 40px !important;
  padding: 6px 4px !important;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: stretch;
  gap: var(--club-hub-gap);
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] :is(
  .clubPcAttendanceWorkspace > .panel,
  .clubPcAttendanceMain > .panel,
  .clubPcAttendanceSide > .panel,
  .clubPcInsightsWorkspace > .panel
) {
  min-width: 0;
  margin: 0 !important;
  padding: 14px !important;
  border-color: var(--club-hub-border) !important;
  border-radius: var(--club-hub-radius) !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceSide,
html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcInsightsWorkspace {
  display: grid;
  gap: var(--club-hub-gap);
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceMain {
  display: flex;
  flex-direction: column;
  gap: var(--club-hub-gap);
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceMain > .clubAttendancePanel {
  flex: 1 1 auto;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubAttendanceToolbar {
  grid-template-columns: minmax(0, 1fr);
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel .formGrid {
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(100%, 420px);
  margin-inline: auto;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel :is(
  label,
  input,
  select,
  textarea,
  button,
  .qrPreviewBox,
  .empty
) {
  text-align: center !important;
  text-align-last: center !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceActions {
  display: grid;
  gap: var(--club-hub-gap);
  width: min(100%, 420px);
  min-width: 0;
  margin-inline: auto;
  padding: 10px;
  border: 1px solid var(--club-hub-border);
  border-radius: var(--club-hub-radius);
  background: #fff;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceActions > .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceActions .clubBulkPresent {
  border-color: #8ac7ee !important;
  background: #fff !important;
  color: #168ee0 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceActions .clubBulkAbsent {
  border-color: #efb1b1 !important;
  background: #fff !important;
  color: #d63838 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcInsightsWorkspace {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: stretch;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubHubHeader {
  gap: 10px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubHubTitle {
  min-height: 44px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubHubTitle > .clubHubHeaderActions {
  grid-template-columns: minmax(220px, 1fr);
  width: min(360px, 40%);
  min-width: 280px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubHubTitle > div:first-child > span,
html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubHubTitle p {
  display: none;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubHubTitle h2 {
  font-size: 24px;
  text-align: left !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubSectionTabs {
  gap: 0;
  overflow: hidden;
  border: 1px solid #cfdae6;
  border-radius: 9px;
  background: #fff;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubSectionTabs > button {
  min-height: 46px;
  border-width: 0 1px 0 0;
  border-color: #d7e1eb;
  border-radius: 0;
  box-shadow: none;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubSectionTabs > button:last-child {
  border-right: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceFilterBar {
  display: grid;
  grid-template-areas: "department date time";
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--club-hub-gap);
  min-width: 0;
  padding: 2px 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] :is(
  #clubPcDepartmentFilterSlot,
  #clubPcAttendanceDynamicFilters,
  .clubPcAttendanceFilterBar .clubHubHeaderActions,
  .clubPcAttendanceFilterBar .clubAttendanceSelectors
) {
  display: contents !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceFilterBar .clubHubHeaderActions label {
  display: block !important;
  grid-area: department;
  min-width: 0;
  margin: 0 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceFilterBar .clubAttDateLabel {
  grid-area: date;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceFilterBar .clubAttSlotLabel {
  grid-area: time;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceFilterBar :is(
  .clubHubHeaderActions label > span,
  .clubAttendanceSelectors label > span:first-child
) {
  display: none;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceFilterBar :is(
  label,
  select,
  button
) {
  width: 100%;
  min-width: 0;
  height: 46px;
  min-height: 46px;
  margin: 0;
  text-align: center !important;
  text-align-last: center !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] :is(
  .clubPcAttendanceWorkspace > .panel,
  .clubPcAttendanceMain > .panel
) {
  height: 100%;
  box-sizing: border-box;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubAttendancePanel,
html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubAttendancePanel #clubAttendanceBox {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceOverview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 10px;
  padding: 2px 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceHeadline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceHeadline span {
  color: #334c65;
  font-size: 14px;
  font-weight: 900;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceHeadline strong {
  color: #17324d;
  font-size: 30px;
  line-height: 1;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceHeadline em {
  color: #526a80;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceChips {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceChips > span {
  min-width: 74px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceChips .all {
  background: #eaf5fe;
  color: #168ee0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceChips .present {
  background: #ecfaf2;
  color: #15934f;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceChips .absent {
  background: #fff1f1;
  color: #d63838;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceProgress {
  grid-column: 1 / -1;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4edf5;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceProgress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1fbd65;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubAttendanceRateCol {
  display: none;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceTable .clubAttendanceSequenceCol {
  width: 8%;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceTable :is(
  .clubAttendanceGradeCol,
  .clubAttendanceClassCol
) {
  width: 10%;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceTable .clubAttendanceNumberCol {
  width: 11%;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceTable .clubAttendanceNameCol {
  width: 21%;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceTable .clubAttendanceStatusCol {
  width: 18%;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceTable .clubAttendanceMemoCol {
  width: 22%;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceTable :is(
  th,
  td,
  input,
  select
) {
  min-width: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
  vertical-align: middle !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubAttStatus {
  border-color: transparent !important;
  font-weight: 900;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubAttStatus-present {
  background: #16b85d !important;
  color: #fff !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubAttStatus-absent {
  background: #ef2f2f !important;
  color: #fff !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] :is(
  .clubAttStatus-late,
  .clubAttStatus-official,
  .clubAttStatus-early
) {
  background: #f3a524 !important;
  color: #fff !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubAttStatus option {
  background: #fff;
  color: #253c52;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel :is(
  .clubQrDateField,
  .clubQrSlotField,
  #qrLinkBox
) {
  display: none !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel .clubQrMemberField {
  grid-template-columns: minmax(0, 1fr);
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel .clubQrMemberField > .label {
  margin-bottom: 4px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel .clubQrActions {
  width: min(100%, 420px);
  margin: 10px auto !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel .qrPreviewBox {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  overflow: auto;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel .qrPreviewBox > .empty {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 100px;
  padding: 10px !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel .qrCard {
  width: min(100%, 340px);
  max-width: 340px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubQrPanel .qrCard img {
  width: 240px;
  height: 240px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcQrPlaceholderIcon {
  color: #168ee0;
  font-size: 42px;
  line-height: 1;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcAttendanceActions {
  align-self: center;
  margin-top: auto;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--club-hub-border);
  border-radius: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberTable col.clubColSequence {
  width: 8% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberTable col.clubColGrade {
  width: 10% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberTable col.clubColClass {
  width: 10% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberTable col.clubColNumber {
  width: 13% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberTable col.clubColName {
  width: 18% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberTable col.clubColGender {
  width: 12% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberTable col.clubColManage {
  width: 29% !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberActions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  margin-inline: auto;
  gap: 6px;
  min-height: 34px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubMemberTable :is(
  .clubMemberEdit,
  .clubMemberDelete
) {
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px !important;
  min-width: 52px !important;
  min-height: 30px !important;
  padding: 4px !important;
  font-size: 11px !important;
  white-space: nowrap;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubStatsToolbar {
  justify-content: center;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] :is(
  .clubStatMonthNavigator,
  .clubCalendarMonthNavigator
) {
  display: grid !important;
  grid-template-columns: 42px 180px 42px !important;
  gap: 10px !important;
  width: 284px !important;
  max-width: 284px !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] :is(
  .clubStatMonthNavigator,
  .clubCalendarMonthNavigator
) > * {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  margin: 0 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubCalendarMonthHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 284px minmax(0, 1fr) !important;
  align-items: center;
  gap: 0 !important;
  min-height: 42px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubCalendarMonthNavigator {
  grid-column: 2;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] #clubCalendarToday {
  grid-column: 3;
  justify-self: start;
  width: 80px !important;
  min-width: 80px !important;
  height: 42px !important;
  margin-left: 0 !important;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcInsightsWorkspace > :is(
  .clubStatsPanel,
  .clubCalendarPanel
) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubStatsPanel {
  contain: size;
  min-height: 0;
  overflow: hidden;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcInsightsWorkspace > :is(
  .clubStatsPanel,
  .clubCalendarPanel
) > :is(#clubStatsBox, #clubCalendarBox) {
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubStatsPanel #clubStatsBox {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubStatsMetrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubStatsMetrics article {
  min-height: 72px;
  place-content: center;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubStatsRateTrack {
  margin: 10px 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcStatsStudentList {
  display: grid;
  flex: 1 1 0;
  align-content: start;
  gap: 8px;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcStatsStudent {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dce7f1;
  border-radius: 10px;
  background: #fbfdff;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcStatsStudent > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcStatsStudent strong {
  min-width: 0;
  overflow: hidden;
  color: #203d57;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcStatsStudent em {
  flex: 0 0 auto;
  color: #168ee0;
  font-size: 16px;
  font-style: normal;
  font-weight: 950;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcStatsStatusChips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubPcStatsStatusChips span {
  min-width: 0;
  padding: 5px 2px;
  border-radius: 6px;
  background: #f1f6fa;
  color: #536b80;
  font-size: 9px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubCalendarWorkspace {
  grid-template-columns: minmax(0, 1fr);
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubCalendarSummary {
  display: grid;
  grid-template-columns: minmax(128px, .8fr) minmax(120px, .7fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 8px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubCalendarSummaryMetrics {
  margin: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubCalendarSummaryEvents {
  min-width: 0;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubCalendarSideEvent {
  min-height: 50px;
}

html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubCalDay {
  min-height: 72px !important;
  padding: 5px;
}

#clubDateSelectModal.clubDateSelectModalPc .clubDateSelectDialog {
  width: min(600px, calc(100vw - 32px));
  overflow-x: hidden !important;
}

#clubDateSelectModal.clubDateSelectModalPc .clubDateSelectHeadPc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

#clubDateSelectModal.clubDateSelectModalPc .clubDateSelectCopy {
  min-width: 0;
  text-align: center;
}

#clubDateSelectModal.clubDateSelectModalPc .clubDateSelectHeadActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(66px, 1fr));
  justify-self: end;
  gap: 7px;
}

#clubDateSelectModal.clubDateSelectModalPc .clubDateSelectHeadActions > .btn {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 6px 9px;
  text-align: center;
}

#clubDateSelectModal.clubDateSelectModalPc .clubDateGrid {
  grid-auto-rows: 44px;
}

#clubDateSelectModal.clubDateSelectModalPc .clubDateChoice {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 !important;
}

/* iPad 가로 — 통합 구성을 유지하면서 터치 크기와 실제 본문 폭을 보정합니다. */
@media (min-width: 1024px) and (orientation: landscape) {
  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] {
    --club-hub-gap: 10px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] :is(
    .clubPcAttendanceWorkspace > .panel,
    .clubPcAttendanceMain > .panel,
    .clubPcAttendanceSide > .panel,
    .clubPcInsightsWorkspace > .panel
  ) {
    padding: 12px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubSectionTabs > button {
    min-height: 48px;
    padding-block: 9px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubManageGrid {
    grid-template-columns: minmax(240px, .72fr) minmax(0, 2fr);
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberQuickActions > .btn {
    min-height: 44px !important;
    font-size: 10.5px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberTable col.clubColSequence {
    width: 8% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberTable col.clubColGrade,
  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberTable col.clubColClass {
    width: 10% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberTable col.clubColNumber {
    width: 13% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberTable col.clubColName {
    width: 18% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberTable col.clubColGender {
    width: 12% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberTable col.clubColManage {
    width: 29% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberTable :is(th, td) {
    overflow: hidden !important;
    padding: 7px 3px !important;
    text-overflow: ellipsis !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberActions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    min-height: 44px !important;
    margin-inline: auto !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberTable :is(
    .clubMemberEdit,
    .clubMemberDelete
  ) {
    display: flex !important;
    flex: 0 0 52px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubMemberTable :is(
    .clubMemberEdit,
    .clubMemberDelete
  )::before {
    content: none !important;
    display: none !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceWorkspace {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceFilterBar :is(
    label,
    select,
    button
  ) {
    height: 48px;
    min-height: 48px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceTable :is(
    th,
    td
  ) {
    padding: 8px 3px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceTable :is(
    th,
    td
  ):nth-child(1) {
    width: 8% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceTable :is(
    th,
    td
  ):nth-child(2),
  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceTable :is(
    th,
    td
  ):nth-child(3) {
    width: 10% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceTable :is(
    th,
    td
  ):nth-child(4) {
    width: 11% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceTable :is(
    th,
    td
  ):nth-child(5) {
    width: 21% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceTable :is(
    th,
    td
  ):nth-child(6) {
    width: 18% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceTable :is(
    th,
    td
  ):nth-child(7) {
    width: 22% !important;
  }

  html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] body
  #app.clubScreen[data-club-ipad-landscape="true"] #clubAttendanceBox
  table.clubPcAttendanceTable.dataTable :is(th, td):nth-child(1) {
    width: 8% !important;
  }

  html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] body
  #app.clubScreen[data-club-ipad-landscape="true"] #clubAttendanceBox
  table.clubPcAttendanceTable.dataTable :is(th, td):nth-child(2),
  html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] body
  #app.clubScreen[data-club-ipad-landscape="true"] #clubAttendanceBox
  table.clubPcAttendanceTable.dataTable :is(th, td):nth-child(3) {
    width: 10% !important;
  }

  html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] body
  #app.clubScreen[data-club-ipad-landscape="true"] #clubAttendanceBox
  table.clubPcAttendanceTable.dataTable :is(th, td):nth-child(4) {
    width: 11% !important;
  }

  html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] body
  #app.clubScreen[data-club-ipad-landscape="true"] #clubAttendanceBox
  table.clubPcAttendanceTable.dataTable :is(th, td):nth-child(5) {
    width: 21% !important;
  }

  html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] body
  #app.clubScreen[data-club-ipad-landscape="true"] #clubAttendanceBox
  table.clubPcAttendanceTable.dataTable :is(th, td):nth-child(6) {
    width: 18% !important;
  }

  html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] body
  #app.clubScreen[data-club-ipad-landscape="true"] #clubAttendanceBox
  table.clubPcAttendanceTable.dataTable :is(th, td):nth-child(7) {
    width: 22% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceTable :is(
    input,
    select
  ) {
    min-height: 44px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcAttendanceActions > .btn {
    min-height: 48px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubQrPanel .formGrid > :is(
    .clubQrDateField,
    .clubQrSlotField
  ) {
    display: none !important;
  }

  html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] body
  #app.clubScreen[data-club-ipad-landscape="true"] .clubQrPanel .formGrid > label.clubQrDateField,
  html:is(.pe87Ipad, .pe87IpadRuntime)[data-pe-tab="clubs"] body
  #app.clubScreen[data-club-ipad-landscape="true"] .clubQrPanel .formGrid > label.clubQrSlotField {
    display: none !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubQrPanel .formGrid > .clubQrMemberField {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubQrPanel .clubQrMemberField > .label {
    width: auto !important;
    margin-bottom: 0;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubQrPanel .qrPreviewBox {
    min-height: 310px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcInsightsWorkspace {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubPcStatsStudent {
    padding: 9px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-ipad-landscape="true"] .clubCalDay {
    min-height: 76px !important;
  }

  html:is(.pe87Ipad, .pe87IpadRuntime) #clubDateSelectModal.clubDateSelectModalPc .clubDateSelectDialog {
    width: min(680px, calc(100vw - 40px));
  }

  html:is(.pe87Ipad, .pe87IpadRuntime) #clubDateSelectModal.clubDateSelectModalPc .clubDateGrid {
    grid-auto-rows: 48px;
  }

  html:is(.pe87Ipad, .pe87IpadRuntime) #clubDateSelectModal.clubDateSelectModalPc .clubDateChoice {
    height: 48px;
    min-height: 48px;
  }
}

html[data-pe-tab="clubs"] :is(
  .clubMemberActionModal,
  #clubMemberEditModal,
  #clubCalModal,
  .clubImportModal,
  .mobileClubPickerSheet,
  .mobileClubImportSheet,
  .mobileClubDetailSheet
) :is(button, input, select, textarea, th, td, label, span, b, strong, p, h3) {
  text-align: center !important;
  text-align-last: center;
}

/* Fold7 펼침 */
@media (min-width: 769px) and (max-width: 1200px) {
  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubHubTitle {
    align-items: stretch;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubHubHeaderActions {
    min-width: min(390px, 48%);
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubSectionTabs > button {
    min-height: 42px;
    font-size: 11px;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubOverviewBody {
    grid-template-columns: minmax(0, 1.1fr) minmax(245px, .9fr);
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubManageGrid {
    grid-template-columns: minmax(235px, .72fr) minmax(0, 1.58fr);
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubAttendanceToolbar {
    grid-template-columns: minmax(280px, 1.6fr) minmax(330px, 2fr);
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubCalendarWorkspace {
    grid-template-columns: minmax(0, 1fr) 210px;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubCalDay {
    min-height: 102px !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubCalDay.selected,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen .clubCalDay.selected {
    box-shadow: none !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen .clubHub,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen .clubHub {
    padding-bottom: max(128px, env(safe-area-inset-bottom)) !important;
  }

  /* Fold7 펼침 통합 화면 — 기존 Fold 카드형 표 규칙과 달력 2열 규칙을 분리합니다. */
  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"],
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] {
    --club-hub-gap: 10px;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubHub,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubHub {
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubPcAttendanceWorkspace > .panel,
    .clubPcAttendanceMain > .panel,
    .clubPcAttendanceSide > .panel,
    .clubPcInsightsWorkspace > .panel
  ),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubPcAttendanceWorkspace > .panel,
    .clubPcAttendanceMain > .panel,
    .clubPcAttendanceSide > .panel,
    .clubPcInsightsWorkspace > .panel
  ) {
    padding: 12px !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubSectionTabs > button,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubSectionTabs > button {
    min-height: 48px;
    padding-block: 9px;
    font-size: 12px;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubManageGrid,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubManageGrid {
    grid-template-columns: minmax(250px, 7fr) minmax(0, 18fr);
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubDepartmentCreateRow > *,
    .clubMemberQuickActions > .btn
  ),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubDepartmentCreateRow > *,
    .clubMemberQuickActions > .btn
  ) {
    min-height: 44px !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberQuickActions > .btn,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberQuickActions > .btn {
    font-size: 10.5px;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberActions,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberActions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    min-height: 44px !important;
    margin-inline: auto !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberTable :is(
    .clubMemberEdit,
    .clubMemberDelete
  ),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberTable :is(
    .clubMemberEdit,
    .clubMemberDelete
  ) {
    display: flex !important;
    flex: 0 0 52px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberTable :is(
    .clubMemberEdit,
    .clubMemberDelete
  )::before,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberTable :is(
    .clubMemberEdit,
    .clubMemberDelete
  )::before {
    display: none !important;
    content: none !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceWorkspace,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceWorkspace {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceFilterBar :is(
    label,
    select,
    button
  ),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceFilterBar :is(
    label,
    select,
    button
  ) {
    height: 48px;
    min-height: 48px;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable.dataTable,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable.dataTable {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 1px solid #dbe5ed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    table-layout: fixed !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable thead,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable thead {
    display: table-header-group !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable tbody,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable tbody {
    display: table-row-group !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable :is(thead, tbody) > tr,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable :is(thead, tbody) > tr {
    display: table-row !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable :is(th, td),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable :is(th, td) {
    position: static !important;
    display: table-cell !important;
    width: auto;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 3px !important;
    border: 0 !important;
    border-bottom: 1px solid #e2eaf0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    text-align: center !important;
    text-align-last: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable th,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable th {
    background: #f4f8fb !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable tbody tr:last-child td,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable tbody tr:last-child td {
    border-bottom: 0 !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable td::before,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubAttendancePanel table.clubPcAttendanceTable td::before {
    display: none !important;
    content: none !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(1),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(1) {
    width: 8% !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(2),
  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(3),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(2),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(3) {
    width: 10% !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(4),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(4) {
    width: 11% !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(5),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(5) {
    width: 21% !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(6),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(6) {
    width: 18% !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(7),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(th, td):nth-child(7) {
    width: 22% !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(input, select),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(input, select) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 5px !important;
    font-size: 11px !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceActions > .btn,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceActions > .btn {
    height: 48px !important;
    min-height: 48px !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .formGrid > :is(
    .clubQrDateField,
    .clubQrSlotField
  ),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .formGrid > :is(
    .clubQrDateField,
    .clubQrSlotField
  ) {
    display: none !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .formGrid > .clubQrMemberField,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .formGrid > .clubQrMemberField {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .clubQrMemberField > .label,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .clubQrMemberField > .label {
    width: auto !important;
    margin-bottom: 0;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .qrPreviewBox,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .qrPreviewBox {
    min-height: 310px;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcInsightsWorkspace,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcInsightsWorkspace {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubStatMonthNavigator,
    .clubCalendarMonthNavigator
  ),
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubStatMonthNavigator,
    .clubCalendarMonthNavigator
  ) {
    grid-template-columns: 48px 188px 48px !important;
    width: 304px !important;
    max-width: 304px !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubStatMonthNavigator,
    .clubCalendarMonthNavigator
  ) > *,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubStatMonthNavigator,
    .clubCalendarMonthNavigator
  ) > * {
    height: 48px !important;
    min-height: 48px !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarMonthHeader,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarMonthHeader {
    grid-template-columns: minmax(0, 1fr) 304px minmax(0, 1fr) !important;
    min-height: 48px;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarToday,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarToday {
    width: 80px !important;
    min-width: 80px !important;
    height: 48px !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarWorkspace,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarWorkspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarSummary,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarSummary {
    display: grid;
    grid-template-columns: minmax(128px, .8fr) minmax(120px, .7fr) minmax(0, 1.8fr);
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 8px;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarSummaryMetrics,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarSummaryMetrics {
    margin: 0;
  }

  html.pe87FoldWide[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalDay,
  html[data-pe-fold-wide="true"][data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalDay {
    min-height: 88px !important;
    padding: 5px;
  }

  html.pe87FoldWide #clubDateSelectModal.clubDateSelectModalPc .clubDateSelectDialog,
  html[data-pe-fold-wide="true"] #clubDateSelectModal.clubDateSelectModalPc .clubDateSelectDialog {
    width: min(680px, calc(100vw - 40px));
  }

  html.pe87FoldWide #clubDateSelectModal.clubDateSelectModalPc .clubDateGrid,
  html[data-pe-fold-wide="true"] #clubDateSelectModal.clubDateSelectModalPc .clubDateGrid {
    grid-auto-rows: 48px;
  }

  html.pe87FoldWide #clubDateSelectModal.clubDateSelectModalPc .clubDateChoice,
  html[data-pe-fold-wide="true"] #clubDateSelectModal.clubDateSelectModalPc .clubDateChoice {
    height: 48px;
    min-height: 48px;
  }

  /*
   * Samsung Internet이 펼친 Fold를 Android 태블릿으로 먼저 분류해도
   * 앱의 Fold 통합 판정값만으로 동일한 터치 레이아웃을 보장합니다.
   */
  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] {
    --club-hub-gap: 10px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubHub {
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubPcAttendanceWorkspace > .panel,
    .clubPcAttendanceMain > .panel,
    .clubPcAttendanceSide > .panel,
    .clubPcInsightsWorkspace > .panel
  ) {
    padding: 12px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubSectionTabs > button {
    min-height: 48px;
    padding-block: 9px;
    font-size: 12px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubManageGrid {
    grid-template-columns: minmax(250px, 7fr) minmax(0, 18fr);
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubDepartmentCreateRow > *,
    .clubMemberQuickActions > .btn
  ) {
    min-height: 44px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberQuickActions > .btn {
    font-size: 10.5px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberActions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    min-height: 44px !important;
    margin-inline: auto !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberTable :is(
    .clubMemberEdit,
    .clubMemberDelete
  ) {
    display: flex !important;
    flex: 0 0 52px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubMemberTable :is(
    .clubMemberEdit,
    .clubMemberDelete
  )::before {
    display: none !important;
    content: none !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceWorkspace {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceFilterBar :is(
    label,
    select,
    button
  ) {
    height: 48px;
    min-height: 48px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceTable :is(input, select) {
    height: 44px !important;
    min-height: 44px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcAttendanceActions > .btn {
    height: 48px !important;
    min-height: 48px !important;
  }

  html[data-pe-tab="clubs"] body #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .formGrid > label:is(
    .clubQrDateField,
    .clubQrSlotField
  ) {
    display: none !important;
  }

  html[data-pe-tab="clubs"] body #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .formGrid > label.clubQrMemberField {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubQrPanel .qrPreviewBox {
    min-height: 310px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubPcInsightsWorkspace {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubStatMonthNavigator,
    .clubCalendarMonthNavigator
  ) {
    grid-template-columns: 48px 188px 48px !important;
    width: 304px !important;
    max-width: 304px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] :is(
    .clubStatMonthNavigator,
    .clubCalendarMonthNavigator
  ) > * {
    height: 48px !important;
    min-height: 48px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarMonthHeader {
    grid-template-columns: minmax(0, 1fr) 304px minmax(0, 1fr) !important;
    min-height: 48px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarToday {
    width: 80px !important;
    min-width: 80px !important;
    height: 48px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarWorkspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalendarSummary {
    display: grid;
    grid-template-columns: minmax(128px, .8fr) minmax(120px, .7fr) minmax(0, 1.8fr);
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 8px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalDay {
    min-height: 88px !important;
    padding: 5px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalDay.selected {
    box-shadow: none !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .foldClubCalDay {
    padding: 0 !important;
    overflow: hidden !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .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;
    cursor: pointer !important;
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .foldClubCalendarButton .clubCalEvents,
  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .foldClubCalendarButton .clubCalBadge {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalBadge > :is(
    .foldClubCalDepartment,
    .foldClubCalTime,
    .foldClubCalHeadcount
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] .clubCalBadge > .foldClubCalHeadcount {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    width: auto !important;
    margin-top: 3px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: #12b76a !important;
    color: #fff !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

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

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] ~ #clubDateSelectModal.clubDateSelectModalPc .clubDateSelectDialog,
  html[data-pe-tab="clubs"] #clubDateSelectModal.clubDateSelectModalPc .clubDateSelectDialog {
    width: min(680px, calc(100vw - 40px));
  }
}

/* iPad의 실제 콘텐츠 폭에서는 달력 요약과 표를 한 화면 폭 안에 유지합니다. */
@media (min-width: 769px) and (max-width: 1100px) {
  html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarWorkspace {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummary {
    display: grid;
    grid-template-columns: minmax(170px, .7fr) minmax(150px, .5fr) minmax(0, 1.8fr);
    align-items: center;
    gap: 8px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubCalendarSummaryMetrics {
    margin: 0;
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubStatsTable {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    font-size: 10px;
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubStatsTable th,
  html[data-pe-tab="clubs"] #app.clubScreen .clubStatsTable td {
    padding: 7px 3px !important;
    white-space: normal;
    word-break: keep-all;
  }

  html[data-pe-tab="clubs"] #app.clubScreen .clubStatsTable th:first-child,
  html[data-pe-tab="clubs"] #app.clubScreen .clubStatsTable td:first-child {
    width: 25%;
  }
}

/* 접힌 Fold7 / iPhone */
@media (max-width: 768px) {
  html[data-pe-tab="clubs"] #app.clubScreen {
    --club-hub-gap: 8px;
  }

  body.mobileClubView #app.clubScreen {
    padding-top: 8px !important;
  }

  body.mobileClubView .mobileClubRoot,
  body.mobileClubView .mobileClubStack {
    gap: 8px !important;
  }

  body.mobileClubView .mobileClubSelector,
  body.mobileClubView .mobileClubPanel {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  body.mobileClubView .mobileClubSelector {
    display: grid;
    gap: 8px;
  }

  body.mobileClubView .mobileClubSelectorHead {
    margin: 0;
  }

  body.mobileClubView .mobileClubSelectorHead > div > span {
    font-size: 20px;
  }

  body.mobileClubView .mobileClubSelectorHead p b {
    font-size: 17px;
    text-align: center;
  }

  body.mobileClubView .mobileClubSelectorHead p small {
    font-size: 10px;
    text-align: center;
  }

  body.mobileClubView .mobileClubSelectorGrid.single {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
  }

  body.mobileClubView .mobileClubTabs {
    display: flex;
    gap: 6px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding: 1px 0 4px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  body.mobileClubView .mobileClubTabs::-webkit-scrollbar {
    display: none;
  }

  body.mobileClubView .mobileClubTabs > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 86px;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid #cbd8e4;
    border-radius: 9px;
    background: #fff;
    color: #31516f;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    scroll-snap-align: start;
  }

  body.mobileClubView .mobileClubTabs > button.active {
    border-color: #168ee0;
    background: #168ee0;
    color: #fff;
  }

  body.mobileClubView .mobileClubCurrent {
    min-height: 42px;
    padding: 8px 10px;
    text-align: center;
  }

  body.mobileClubView .mobileClubCurrent > div,
  body.mobileClubView .mobileClubCurrent > strong {
    text-align: center;
  }

  body.mobileClubView :is(
    button,
    input,
    select,
    textarea,
    label,
    .mobileClubPickerButton,
    .mobileClubPanelHead,
    .mobileClubMemberCard,
    .mobileClubAttendanceCard,
    .mobileClubStatsCard
  ) {
    text-align: center !important;
    text-align-last: center;
  }

  body.mobileClubView .mobileClubPanelHead {
    justify-content: center;
    gap: 8px;
  }

  body.mobileClubView .mobileClubPanelHead > div,
  body.mobileClubView .mobileClubPanelHead h2,
  body.mobileClubView .mobileClubPanelHead p {
    text-align: center;
  }

  body.mobileClubView .mobileClubOverviewMetrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.mobileClubView .mobileClubOverviewMetrics article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 6px;
    border: 1px solid #d8e4ef;
    border-radius: 11px;
    background: #fff;
    text-align: center;
  }

  body.mobileClubView .mobileClubOverviewMetrics span {
    color: #64798d;
    font-size: 10px;
    font-weight: 850;
  }

  body.mobileClubView .mobileClubOverviewMetrics strong {
    color: #17324d;
    font-size: 19px;
  }

  body.mobileClubView .mobileClubOverviewMetrics small {
    color: #60778c;
    font-size: 10px;
  }

  body.mobileClubView .mobileClubOverviewActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.mobileClubView .mobileClubOverviewActions > button {
    min-width: 0;
    min-height: 44px;
    border: 1px solid #cbd8e4;
    border-radius: 9px;
    background: #fff;
    color: #31516f;
    font-size: 11px;
    font-weight: 900;
  }

  body.mobileClubView .mobileClubOverviewActions > button.primary {
    border-color: #168ee0;
    background: #168ee0;
    color: #fff;
  }

  body.mobileClubView .mobileClubOverviewRecent {
    display: grid;
    gap: 7px;
  }

  body.mobileClubView .mobileClubOverviewRecent > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px;
    border: 1px solid #dce7f1;
    border-radius: 9px;
    background: #fff;
  }

  body.mobileClubView .mobileClubOverviewRecent span {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  body.mobileClubView .mobileClubOverviewRecent strong {
    color: #15934f;
    white-space: nowrap;
  }

  body.mobileClubView .mobileClubDepartmentActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: auto;
  }

  body.mobileClubView .mobileClubPanel.dangerLine .mobileClubPanelHead.inline {
    display: grid;
    grid-template-columns: minmax(96px, .72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: 8px;
  }

  body.mobileClubView .mobileClubDepartmentActions > button {
    width: 100%;
    min-width: 0;
    padding: 7px 3px;
    font-size: 10px;
  }

  body.mobileClubView .mobileClubRosterUpload {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  body.mobileClubView .mobileClubMemberNameButton b {
    white-space: normal;
    word-break: keep-all;
  }

  body.mobileClubView .mobileClubAttendanceControls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.mobileClubView .mobileClubAttendanceActions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.mobileClubView .mobileClubAttendanceActions > button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 7px 2px !important;
    font-size: 11px !important;
  }

  body.mobileClubView .mobileClubAttendanceCard > header {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  body.mobileClubView .mobileClubAttendanceCard > header b {
    white-space: normal;
    word-break: keep-all;
  }

  body.mobileClubView .mobileClubStatsMetrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
  }

  body.mobileClubView .mobileClubStatsMetrics > span {
    display: grid;
    gap: 4px;
    padding: 9px 4px;
    border: 1px solid #dfe8f1;
    border-radius: 9px;
    background: #f9fbfd;
    color: #63788c;
    font-size: 10px;
    font-weight: 850;
    text-align: center;
  }

  body.mobileClubView .mobileClubStatsMetrics b {
    color: #1479bc;
    font-size: 15px;
  }

  body.mobileClubView .mobileClubMonthRow.single {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mobileClubView .mobileClubMonthRow.calendar {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
  }

  body.mobileClubView .mobileClubIpadMonthNavigator {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    gap: 6px !important;
    width: 100%;
  }

  body.mobileClubView .mobileClubIpadMonthNavigator > button,
  body.mobileClubView .mobileClubMonthRow.calendar > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 6px 2px !important;
  }

  body.mobileClubView .mobileClubCalendarWeek,
  body.mobileClubView .mobileClubCalendarGrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }

  body.mobileClubView .mobileClubCalendarWeek {
    margin-top: 9px;
  }

  body.mobileClubView .mobileClubCalendarWeek > span {
    padding: 5px 1px;
    color: #64798d;
    font-size: 9px;
    font-weight: 900;
    text-align: center;
  }

  body.mobileClubView .mobileClubCalendarCell {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 52px;
    padding: 3px 1px;
    border: 1px solid #dde7f0;
    border-radius: 7px;
    background: #fff;
    color: #274158;
  }

  body.mobileClubView .mobileClubCalendarCell.empty {
    border-color: transparent;
    background: transparent;
  }

  body.mobileClubView .mobileClubCalendarCell.active {
    border-color: #168ee0;
    box-shadow: inset 0 0 0 1px #168ee0;
    background: #eef8ff;
  }

  body.mobileClubView .mobileClubCalendarCell.today b {
    color: #168ee0;
  }

  body.mobileClubView .mobileClubCalendarCell b {
    font-size: 11px;
  }

  body.mobileClubView .mobileClubCalendarCell span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    padding: 2px;
    border-radius: 999px;
    background: #20b666;
    color: #fff;
    font-size: 7px;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.mobileClubView .mobileClubCalendarEvent {
    align-items: center;
    text-align: center;
  }

  body.mobileClubView .mobileClubCalendarEvent > span {
    align-items: center;
  }

  body.mobileClubView .mobileClubCalendarEvent > strong {
    color: #15934f;
  }

  #clubDateSelectModal,
  #clubMonthSelectModal {
    align-items: center !important;
    padding: 10px !important;
  }

  #clubDateSelectModal .clubDateSelectDialog,
  #clubMonthSelectModal .monthSelectDialog {
    width: min(430px, calc(100vw - 20px)) !important;
    max-width: none !important;
    padding: 14px !important;
    border-radius: 15px !important;
  }

  #clubDateSelectModal .clubDateChoice {
    min-height: 40px;
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  body.mobileClubView .mobileClubTabs > button {
    min-width: 80px;
    padding-inline: 7px;
  }

  body.mobileClubView .mobileClubAttendanceActions {
    gap: 5px !important;
  }

  body.mobileClubView .mobileClubAttendanceActions > button {
    font-size: 10px !important;
  }

  body.mobileClubView .mobileClubCalendarCell {
    min-height: 49px;
  }
}

/*
 * v1.17.63 — Galaxy Fold7 접힘화면 전용 정리
 * SM-F 계열의 접힌 360px 화면에만 적용하며 iPhone과 펼침화면은 유지합니다.
 */
@media (max-width: 768px) {
  html.pe87FoldDevice:not(.pe87FoldWide)[data-pe-tab="clubs"] body.mobileClubView .mobileClubTabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    overflow-x: visible;
    padding: 0;
    scroll-snap-type: none;
  }

  html.pe87FoldDevice:not(.pe87FoldWide)[data-pe-tab="clubs"] body.mobileClubView .mobileClubTabs > button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 7px 3px;
    font-size: 10px;
    line-height: 1.15;
    scroll-snap-align: none;
  }

  html.pe87FoldDevice:not(.pe87FoldWide)[data-pe-tab="clubs"] body.mobileClubView .mobileClubAttendanceControls {
    grid-template-columns: minmax(0, 1.55fr) minmax(94px, .85fr) !important;
    gap: 8px !important;
  }

  html.pe87FoldDevice:not(.pe87FoldWide)[data-pe-tab="clubs"] body.mobileClubView .mobileClubAttendanceControls .mobileClubPickerButton {
    min-width: 0;
  }

  html.pe87FoldDevice:not(.pe87FoldWide)[data-pe-tab="clubs"] body.mobileClubView .mobileClubAttendanceControls .mobileClubPickerButton > b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.pe87FoldDevice:not(.pe87FoldWide)[data-pe-tab="clubs"] body.mobileClubView .mobileClubMonthRow.calendar {
    grid-template-columns: minmax(0, 1fr) 64px !important;
    gap: 6px !important;
  }

  html.pe87FoldDevice:not(.pe87FoldWide)[data-pe-tab="clubs"] #mobileClubRoot .mobileClubIpadMonthNavigator {
    box-sizing: border-box;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  html.pe87FoldDevice:not(.pe87FoldWide)[data-pe-tab="clubs"] #mobileClubRoot .mobileClubIpadMonthNavigator > button,
  html.pe87FoldDevice:not(.pe87FoldWide)[data-pe-tab="clubs"] #mobileClubRoot .mobileClubMonthRow.calendar > #mobileClubCalendarToday {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 4px !important;
  }

  html.pe87FoldDevice:not(.pe87FoldWide)[data-pe-tab="clubs"] #mobileClubRoot .mobileClubIpadMonthNavigator > .mobileClubMonthDisplay {
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/*
 * v1.17.61 — 학교스포츠클럽 넓은 화면 정렬 및 Fold7 달력 셀
 * 모바일 전용 화면은 별도 DOM을 사용하므로 이 규칙의 영향을 받지 않습니다.
 */
html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubOverviewCard h3,
html[data-pe-tab="clubs"] #app.clubScreen[data-club-windows-pc="true"] .clubOverviewCard p {
  text-align: left !important;
}

@media (min-width: 769px) and (max-width: 1200px) {
  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubStatsBox .clubStatMonthNavigator,
  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .clubCalendarMonthNavigator {
    box-sizing: border-box !important;
    grid-template-columns: 48px 180px 48px !important;
    gap: 10px !important;
    justify-content: center !important;
    justify-self: center !important;
    width: 296px !important;
    max-width: 296px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubStatsBox .clubStatMonthNavigator .clubStatMonthShift,
  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .clubCalendarMonthNavigator .clubCalendarMonthShift {
    box-sizing: border-box !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .clubCalendarMonthHeader {
    grid-template-columns: minmax(0, 1fr) 296px minmax(0, 1fr) !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox #clubCalendarToday {
    justify-self: end !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    margin-left: 0 !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .foldClubCalendarButton {
    padding: 7px 4px !important;
    overflow: hidden !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .foldClubCalendarButton > b {
    margin-bottom: 4px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .foldClubCalendarButton .clubCalBadge {
    box-sizing: border-box !important;
    gap: 1px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 3px 2px !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .clubCalBadge > .foldClubCalDepartment {
    display: -webkit-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    color: #23405a !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .clubCalBadge > .foldClubCalTime {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #60778c !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .clubCalBadge > .foldClubCalHeadcount {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 2px !important;
    padding: 3px 2px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #12b76a !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: -0.1px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .foldClubCalendarButton.isEmpty .clubCalEmpty {
    box-sizing: border-box !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-pe-tab="clubs"] #app.clubScreen[data-club-fold-integrated="true"] #clubCalendarBox .foldClubCalEmptyLine {
    display: block !important;
    width: 100% !important;
    overflow-wrap: normal !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}