/* PE-Class v1.14.32 — PC 학교스포츠클럽 전용 정렬
 * 769px 이상에서 상단 3카드·명단 표와 출석 달력 상세 모달에만 적용합니다.
 */
@media (min-width:769px){
  .clubPcTopGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    align-items:stretch;
    width:100%;
    min-width:0;
  }

  .clubPcTopGrid>.clubPcTopCard{
    width:auto!important;
    min-width:0!important;
    height:540px;
    min-height:540px;
    max-height:540px;
    padding:18px!important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  .clubPcTopGrid>.clubPcTopCard>h3{
    margin:0 0 14px;
    line-height:1.25;
    flex:0 0 auto;
  }

  .clubPcTopGrid input,
  .clubPcTopGrid select,
  .clubPcTopGrid textarea,
  .clubPcTopGrid .btn{
    min-width:0;
    font-size:13px;
  }

  .clubPcTopGrid input,
  .clubPcTopGrid select{
    height:38px;
    padding:8px 10px;
  }

  .clubPcTopGrid .btn{
    min-height:38px;
    padding:8px 11px;
    white-space:nowrap;
  }

  /* 왼쪽: 부서 관리 */
  .clubDepartmentPanel .clubDepartmentCreateRow{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
    align-items:center;
    flex:0 0 auto;
  }

  .clubDepartmentPanel .clubDepartmentCreateRow>*{
    width:100%;
    margin:0;
  }

  .clubDepartmentPanel #addClubBtn{
    grid-column:1 / -1;
  }

  .clubDepartmentPanel .clubDeptList{
    flex:1 1 auto;
    min-height:0;
    margin-top:12px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:3px;
  }

  .clubDepartmentPanel .clubDept{
    flex:0 0 auto;
    padding:10px;
    gap:7px;
  }

  /* 중앙: 명단 관리 */
  .clubMemberPanel #clubMemberBox{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .clubMemberPanel #clubMemberBox>.empty{
    margin:auto 0;
    padding:24px 8px;
  }

  .clubMemberPanel .clubMemberHead{
    margin-bottom:10px;
    gap:8px;
    flex:0 0 auto;
  }

  .clubMemberPanel .clubMemberHead>div{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .clubMemberPanel #deleteClubBtn{
    min-height:34px;
    padding:6px 9px;
    font-size:12px;
  }

  .clubMemberPanel .clubMemberEntry{
    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    gap:7px!important;
    align-items:center!important;
    margin-bottom:8px!important;
    flex:0 0 auto;
  }

  .clubMemberPanel .clubMemberEntry>*{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  .clubMemberPanel #cmGrade,
  .clubMemberPanel #cmClass,
  .clubMemberPanel #cmNo,
  .clubMemberPanel #cmGender{
    grid-column:span 3;
  }

  .clubMemberPanel #cmName{
    grid-column:span 5;
  }

  .clubMemberPanel #cmPhone{
    grid-column:span 7;
  }

  .clubMemberPanel #addClubMemberBtn{
    grid-column:1 / -1;
  }

  .clubMemberPanel .clubImportRow{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:7px!important;
    align-items:center!important;
    margin-bottom:8px!important;
    flex:0 0 auto;
  }

  .clubMemberPanel .clubImportRow>*{
    min-width:0!important;
    width:100%!important;
    margin:0!important;
  }

  .clubMemberPanel #clubImportBox:not(:empty){
    flex:0 1 150px;
    min-height:70px;
    max-height:150px;
    overflow:auto;
    margin-bottom:8px;
  }

  .clubMemberPanel #clubImportBox .importPanel{
    margin:0;
    padding:9px;
  }

  .clubMemberPanel #clubImportBox .studentPickGrid{
    max-height:88px;
    grid-template-columns:1fr;
  }

  .clubMemberPanel .clubMemberTableWrap{
    flex:1 1 auto;
    min-height:120px;
    max-height:none;
    width:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-gutter:stable;
    box-sizing:border-box;
    margin-top:0;
  }

  .clubMemberPanel .clubMemberTable{
    width:100%;
    min-width:0!important;
    table-layout:fixed;
    box-sizing:border-box;
  }

  .clubMemberPanel .clubMemberTable col.clubColSequence{width:10.9%}
  .clubMemberPanel .clubMemberTable col.clubColGrade{width:11.9%}
  .clubMemberPanel .clubMemberTable col.clubColClass{width:11.9%}
  .clubMemberPanel .clubMemberTable col.clubColNumber{width:12.9%}
  .clubMemberPanel .clubMemberTable col.clubColName{width:23.8%}
  .clubMemberPanel .clubMemberTable col.clubColGender{width:10.9%}
  .clubMemberPanel .clubMemberTable col.clubColManage{width:17.8%}

  .clubMemberPanel .clubMemberTable th,
  .clubMemberPanel .clubMemberTable td{
    overflow:hidden;
    box-sizing:border-box;
  }

  .clubMemberPanel .clubMemberTable th{
    padding:6px 1px;
    font-size:9.5px;
    letter-spacing:-.45px;
    text-overflow:clip;
  }

  .clubMemberPanel .clubMemberTable td{
    padding:6px 3px;
    font-size:10.5px;
    text-overflow:ellipsis;
  }

  .clubMemberPanel .clubMemberTable th:last-child,
  .clubMemberPanel .clubMemberTable td:last-child{
    padding-left:2px!important;
    padding-right:3px!important;
  }

  .clubMemberPanel .clubMemberTable .clubMemberDelete{
    width:100%!important;
    min-width:0!important;
    min-height:26px!important;
    padding:4px 2px!important;
    font-size:10px!important;
    box-sizing:border-box!important;
  }

  /* 오른쪽: QR 출석 */
  .clubQrPanel>.hint{
    margin:0 0 10px;
    line-height:1.45;
    flex:0 0 auto;
  }

  .clubQrPanel .formGrid{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    margin:0 0 10px;
    flex:0 0 auto;
  }

  .clubQrPanel .formGrid label{
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    align-items:center;
    gap:8px;
    margin:0;
  }

  .clubQrPanel .formGrid input,
  .clubQrPanel .formGrid select{
    width:100%;
  }

  .clubQrPanel .clubQrActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    flex:0 0 auto;
  }

  .clubQrPanel .clubQrActions>*{
    width:100%;
    margin:0;
  }

  .clubQrPanel #qrLinkBox{
    width:100%;
    min-height:58px;
    height:58px;
    max-height:58px;
    padding:8px 10px;
    margin-top:10px;
    resize:none;
    flex:0 0 auto;
  }

  .clubQrPanel .qrPreviewBox{
    flex:1 1 auto;
    min-height:0;
    margin-top:10px;
    overflow:auto;
    align-items:flex-start;
  }

  .clubQrPanel .qrPreviewBox>.empty{
    width:100%;
    padding:24px 8px;
  }

  .clubQrPanel .qrCard{
    width:100%;
    max-width:230px;
    padding:8px;
    gap:3px;
    border-radius:12px;
  }

  .clubQrPanel .qrCard img{
    width:120px;
    height:120px;
  }

  .clubQrPanel .qrCard b,
  .clubQrPanel .qrCard span,
  .clubQrPanel .qrCard small{
    font-size:12px;
    max-width:100%;
    overflow-wrap:anywhere;
  }

  /* 출석 달력의 부서별 학생 상세 모달 — 이 모달 표만 가로 스크롤 없이 맞춥니다. */
  #clubCalModal .clubCalAttendanceModalCard{
    width:min(720px,96vw);
    max-width:96vw;
    box-sizing:border-box;
    overflow-x:hidden;
  }

  #clubCalModal .clubCalAttendanceModalHead{
    flex-wrap:nowrap;
    min-width:0;
  }

  #clubCalModal .clubCalAttendanceModalHead h3{
    overflow:hidden;
    min-width:0;
    margin-right:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #clubCalModal .clubCalAttendanceTableWrap{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
  }

  #clubCalModal .clubCalAttendanceTable{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }

  #clubCalModal .clubCalAttendanceTable col.clubCalAttendanceStudentCol{width:38%}
  #clubCalModal .clubCalAttendanceTable col.clubCalAttendanceStatusCol{width:18%}
  #clubCalModal .clubCalAttendanceTable col.clubCalAttendanceMemoCol{width:44%}

  #clubCalModal .clubCalAttendanceTable th,
  #clubCalModal .clubCalAttendanceTable td{
    min-width:0!important;
    box-sizing:border-box;
    padding:9px 8px!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    word-break:keep-all;
  }

  #clubCalModal .clubCalAttendanceTable th:nth-child(2),
  #clubCalModal .clubCalAttendanceTable td:nth-child(2){
    text-align:center!important;
    white-space:nowrap!important;
  }

  #clubCalModal .clubCalAttendanceTable .clubCalAttendanceStudent{
    overflow:hidden;
    text-overflow:ellipsis;
  }

}