/* =====================================================================
   ShuttleX Fold / middle-width responsive layer
   Target: 600px ~ 899px only (Galaxy Z Fold unfolded and similar widths)
   Existing smartphone (<600px), tablet/desktop (>=900px) rules are untouched.
   Build: 2026-08-24
   ===================================================================== */

@media (min-width:600px) and (max-width:899px){
  html,body{max-width:100%;overflow-x:hidden}
  .page-container{width:calc(100% - 28px)!important;max-width:none!important;padding-top:20px!important;padding-bottom:46px!important}

  /* shared signed-in headers */
  .topbar,.page-header,.report-topbar,.member-topbar{
    max-width:100%;
    padding-left:14px!important;
    padding-right:14px!important;
    box-sizing:border-box;
  }
  .topbar{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 12px!important}
  .topbar>.brand,.topbar>.brand-link,.member-topbar>.brand{min-width:0!important;max-width:100%!important}
  .topbar-actions,.header-actions,.report-top-actions{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    gap:6px!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
  }
  .topbar-actions .button,.header-actions .button,.report-top-actions .button{
    min-width:0!important;
    min-height:36px!important;
    padding:7px 10px!important;
    font-size:.78rem!important;
    white-space:nowrap!important;
  }

  /* general cards/forms/modals */
  .modal-card{max-width:calc(100vw - 36px)!important}
  input,select,textarea{max-width:100%}
  .table-wrap,.table-scroll,.responsive-table,.list-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .page-heading{min-width:0}
  .page-heading h1{font-size:clamp(1.55rem,4vw,2rem)}
}

/* =====================================================================
   경기운영 / 관리전광판 (board.html)
   ===================================================================== */
@media (min-width:600px) and (max-width:899px){
  body:has(.monitor-shell){overflow-x:hidden}

  .monitor-header{
    position:sticky!important;
    top:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    column-gap:8px!important;
    row-gap:0!important;
    min-height:0!important;
    padding:7px 10px 9px!important;
  }
  .monitor-brand{
    grid-column:1!important;grid-row:1!important;
    min-width:0!important;max-width:none!important;
    padding:5px 4px!important;
  }
  .monitor-brand b{font-size:19px!important}
  .monitor-brand small{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .monitor-brand>span{font-size:27px!important}
  .monitor-clock{
    grid-column:2!important;grid-row:1!important;
    width:auto!important;min-width:118px!important;
    padding:3px 4px!important;
  }
  .monitor-clock strong{font-size:19px!important}
  .monitor-clock span{font-size:10px!important}
  .monitor-title-wrap{
    grid-column:1 / -1!important;grid-row:2!important;
    width:100%!important;max-width:none!important;min-width:0!important;
    margin:4px 0 0!important;padding:7px 10px!important;
    border-radius:9px!important;
  }
  .monitor-title-wrap h1{font-size:20px!important;letter-spacing:.045em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .monitor-title-wrap p{margin-top:2px!important;font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  .monitor-shell{width:100%;max-width:100%;padding:9px!important;box-sizing:border-box}

  /* 상단 운영 컨트롤: 요약 전체폭 + 기능카드 2열 */
  .control-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .control-summary-card{grid-column:1/-1!important;display:grid!important;grid-template-columns:minmax(210px,.9fr) minmax(0,1.4fr)!important;gap:7px!important;padding:7px!important}
  .control-card{min-width:0!important;padding:6px!important}
  .control-card--manage{grid-column:1/-1!important}
  .control-card-buttons{gap:5px!important}
  .control-card-buttons--three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .control-card-buttons--two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .control-card-buttons--six{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .control-card .action-button{min-width:0!important;min-height:54px!important;padding:5px 4px!important;font-size:12px!important}
  .control-summary-card .meeting-picker,.control-summary-card .status-counters{min-width:0!important;min-height:68px!important}
  .meeting-picker{grid-template-columns:auto minmax(0,1fr)!important;padding:8px 10px!important}
  .meeting-picker select{width:100%!important;min-width:0!important}
  .status-counters{overflow:visible!important}

  /* 펼침 화면 핵심: 코트 2열 */
  .court-monitor-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .court-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;min-width:0!important}
  .court-card{min-width:0!important}
  .court-surface{min-height:278px!important}
  .court-card>header.court-card-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;padding:7px 8px!important}
  .court-card>header.court-card-header h2{font-size:20px!important}
  .court-match-number{font-size:14px!important}
  .court-player-cell .player-token b{font-size:18px!important;line-height:1.12!important}
  .court-player-cell .player-token small{font-size:10px!important}
  .court-card footer button{min-width:0!important}

  /* 준비/대기/출석/검색 패널은 2열로 펼쳐 공간 활용 */
  .monitor-side{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .monitor-side>.side-panel{min-width:0!important}
  .monitor-side>.operation-log-panel,.monitor-side>.timeline-panel{grid-column:1/-1!important}
  .attendance-columns{grid-template-columns:1fr 1fr!important}
  .magnet-list{max-height:none!important}
  #readyList .queue-card,#waitingList .queue-card{min-width:0!important;padding:7px 7px!important;column-gap:4px!important}
  #readyList .queue-card>span,#waitingList .queue-card>span{font-size:13px!important;line-height:1.3!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .queue-broadcast-button{width:27px!important;height:27px!important}

  .quick-tools{grid-template-columns:1fr!important;gap:8px!important}
  .quick-tools>div{min-width:0!important;flex-wrap:wrap!important}
  .quick-tools strong{flex:0 0 100%!important;width:100%!important}
}

/* 600~679에서는 운영카드 버튼이 너무 좁아지지 않게 관리메뉴 3열 */
@media (min-width:600px) and (max-width:679px){
  .control-card-buttons--six{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .control-summary-card{grid-template-columns:1fr!important}
}

/* =====================================================================
   대진관리 (matches.html)
   ===================================================================== */
@media (min-width:600px) and (max-width:899px){
  .matches-page{min-width:0!important}
  .matches-page .page-heading{gap:10px!important;margin-bottom:14px!important}
  .matches-page .page-title-line{gap:5px 10px!important}
  .matches-page .page-title-line p{width:100%!important;font-size:.8rem!important}

  /* 도구는 2열 그룹, 버튼은 그룹 안에서 균등 */
  .matches-page .match-toolbar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;width:100%!important;margin-top:0!important}
  .matches-page .match-toolbar-group{min-width:0!important;padding:7px!important}
  .matches-page .match-toolbar-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  .matches-page .match-toolbar .button{width:100%!important;min-width:0!important;min-height:36px!important;padding:7px 6px!important;font-size:11.5px!important}
  .matches-page .matching-checkin-toggle--toolbar{grid-column:1/-1!important;width:100%!important}

  /* 관리할 모임 카드는 한 열: 중간폭에서 2개 카드가 눌리는 현상 방지 */
  .matches-page .meeting-overview-grid,.matches-page .meeting-overview-grid.meeting-overview-compact{grid-template-columns:1fr!important;gap:10px!important}
  .matches-page .meeting-picker-card,.matches-page .current-meeting-card{min-width:0!important;padding:14px!important}
  .matches-page .meeting-picker-fields{grid-template-columns:minmax(0,1fr)!important}
  .matches-page .meeting-summary{width:100%!important;min-width:0!important}

  /* 참가자 상태는 펼쳤을 때 2열, 내부 스크롤 없음 */
  .matches-page .match-monitor-layout{display:block!important}
  .matches-page .match-monitor-layout>.participant-operation-panel{position:relative!important;top:auto!important;width:100%!important;max-height:none!important;margin:0 0 12px!important}
  .matches-page .match-monitor-layout>.participant-operation-panel .participant-operation-body{max-height:none!important;overflow:visible!important;padding:0 10px 18px!important}
  .matches-page .match-monitor-layout>.participant-operation-panel .operation-participant-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .matches-page .operation-participant{min-width:0!important;min-height:66px!important;padding:8px!important}

  /* AI 설정/생성 영역 */
  .matches-page .auto-grid,.matches-page .auto-grid-simple,.matches-page .advanced-basic-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .matches-page .group-random-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .matches-page .auto-actions,.matches-page .auto-actions-primary{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .matches-page .auto-actions .button,.matches-page .auto-actions-primary .button{width:100%!important;min-width:0!important}
  .matches-page .generated-matches-section{padding:10px!important}

  /* 경기 카드: 실제 Fold 펼침 폭에서는 2열을 우선, 매우 좁으면 아래 규칙에서 1열 */
  .matches-page .sortable-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .matches-page .match-card{min-width:0!important;border-radius:12px!important}
  .matches-page .match-card-head{padding:7px 8px!important}
  .matches-page .match-teams{grid-template-columns:1fr auto 1fr!important;gap:5px!important;padding:8px!important}
  .matches-page .player-slot{min-width:0!important;min-height:44px!important;padding:6px!important}
  .matches-page .player-slot span{font-size:.9rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .matches-page .player-slot small{font-size:.58rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .matches-page .match-card-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;padding:6px 8px 8px!important}
  .matches-page .mini-button{min-width:0!important;padding:5px 4px!important;font-size:.66rem!important;white-space:nowrap!important}

  /* 코트행렬/결과표는 내용 자체를 축소하지 않고 터치 스크롤 허용 */
  .matches-page .court-layout-scroll,.matches-page .group-random-match-table-wrap,.matches-page .standard-result-table-wrap,.matches-page .group-player-ranking-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .matches-page .group-court-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .matches-page .group-random-list-filters,.matches-page .standard-participant-filters,.matches-page .group-participant-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (min-width:600px) and (max-width:699px){
  .matches-page .sortable-list{grid-template-columns:1fr!important}
  .matches-page .match-card-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important}
  .matches-page .mini-button{padding:6px 8px!important;font-size:.7rem!important}
}

/* =====================================================================
   v6.9 Fold 600~899 - 경기운영 상단 카드 2차 보정
   - 관리할 모임: 가로 전체폭
   - 원클릭 경기운영: 남은 예상시간을 상태값 다음 줄로 분리
   - 시스템: 카드/버튼 높이를 기존 Fold 화면 대비 약 50% 축소
   ===================================================================== */
@media (min-width:600px) and (max-width:899px){
  /* 관리할 모임은 Fold 펼침 화면의 첫 행 전체를 사용 */
  .control-row .control-card--meeting{
    grid-column:1 / -1!important;
    width:100%!important;
  }

  /* 모임 선택창도 카드 폭을 충분히 활용 */
  .control-card--meeting .meeting-picker{
    width:100%!important;
    max-width:none!important;
  }
  .control-card--meeting .meeting-picker select{
    width:100%!important;
    max-width:none!important;
  }

  /* 원클릭 상태값: 기본 현황은 첫 줄, 남은 예상시간은 다음 줄 */
  .control-card--game .status-counters--inline{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    align-content:flex-start!important;
    row-gap:4px!important;
    column-gap:7px!important;
    min-height:0!important;
    padding:7px 8px!important;
  }
  .control-card--game .status-counters--inline .is-remaining{
    flex:0 0 100%!important;
    width:100%!important;
    border-top:1px solid #e4ebe7!important;
    margin-top:2px!important;
    padding:6px 2px 1px!important;
    justify-content:flex-start!important;
  }

  /* 시스템 카드는 원클릭 카드 높이에 끌려 늘어나지 않도록 상단 정렬 */
  .control-row .control-card--system{
    align-self:start!important;
    height:auto!important;
    min-height:0!important;
    padding:5px 6px!important;
  }
  .control-card--system>h2{
    margin:0 0 4px!important;
    padding:2px 6px!important;
    min-height:0!important;
    line-height:1.15!important;
    font-size:14px!important;
  }
  .control-card--system .control-card-buttons--two{
    min-height:0!important;
    height:auto!important;
    gap:5px!important;
  }
  .control-card--system .control-card-buttons--two .action-button{
    min-height:42px!important;
    height:42px!important;
    padding:3px 5px!important;
    font-size:12px!important;
    line-height:1.05!important;
  }
  .control-card--system .control-card-buttons--two .action-button span{
    display:inline!important;
  }
}

/* =====================================================================
   v6.9 Fold 600~899 - 경기운영 상단 2열 재배치 v3
   1열: 원클릭 경기 운영 요약
   2열 상단: 다음경기 호출 / 전체코트 종료 / 전체코트 입장
   2열 하단: 시스템
   관리할 모임은 첫 행 전체폭 유지
   ===================================================================== */
@media (min-width:600px) and (max-width:899px){
  /* 상단 컨트롤을 명시적인 2열/4행 구조로 고정 */
  .control-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    align-items:start!important;
    gap:8px!important;
  }

  /* 1행: 관리할 모임 전체폭 */
  .control-row .control-card--meeting{
    grid-column:1 / -1!important;
    grid-row:1!important;
  }

  /* Fold 구간에서 game 카드의 외곽만 풀어 자식들을 부모 grid에 직접 배치 */
  .control-row .control-card--game{
    display:contents!important;
  }

  /* 1열: 원클릭 경기 운영 요약 카드 - 우측 두 블록 높이를 함께 사용 */
  .control-card--game .game-control-summary{
    grid-column:1!important;
    grid-row:2 / 4!important;
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
    min-width:0!important;
    margin:0!important;
    padding:7px!important;
    border:1px solid #c8d4cc!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:0 4px 13px rgba(5,55,30,.07)!important;
    box-sizing:border-box!important;
  }
  .control-card--game .game-control-summary h2{
    align-self:flex-start!important;
    margin:0!important;
  }
  .control-card--game .status-counters--inline{
    width:100%!important;
    flex:1 1 auto!important;
    box-sizing:border-box!important;
  }

  /* 2열 상단: 3개의 현장 운영 버튼 */
  .control-card--game .control-card-buttons--three{
    grid-column:2!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-self:start!important;
    min-height:0!important;
    height:auto!important;
    gap:5px!important;
    padding:6px!important;
    border:1px solid #c8d4cc!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:0 4px 13px rgba(5,55,30,.07)!important;
    box-sizing:border-box!important;
  }
  .control-card--game .control-card-buttons--three .action-button{
    min-height:44px!important;
    height:44px!important;
    padding:4px 3px!important;
    font-size:12px!important;
    line-height:1.05!important;
  }

  /* 2열 하단: 시스템 */
  .control-row .control-card--system{
    grid-column:2!important;
    grid-row:3!important;
    align-self:start!important;
    width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
  }

  /* 다음 행: 관리 메뉴 전체폭 */
  .control-row .control-card--manage{
    grid-column:1 / -1!important;
    grid-row:4!important;
  }
}


/* v7.0.3 · 회원페이지 상단메뉴: Fold/태블릿에서도 /meeting-join 방식 유지 */
@media (min-width:600px) and (max-width:899px){
  #dashboardApp>.member-page-topbar>.member-page-topbar-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:column!important;width:100%!important;max-width:100%!important;gap:6px!important;flex-wrap:nowrap!important;margin:0!important}
  #clubJoinApp>.member-page-topbar>.member-page-topbar-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:column!important;width:100%!important;max-width:100%!important;gap:6px!important;flex-wrap:nowrap!important;margin:0!important}
  #dashboardApp>.member-page-topbar>.member-page-topbar-actions>.button,
  #clubJoinApp>.member-page-topbar>.member-page-topbar-actions>.button,
  #personalApp>.member-page-topbar>.member-page-topbar-actions>.button{display:flex!important;width:100%!important;min-width:0!important;margin:0!important;justify-content:center!important;white-space:nowrap!important}
}

/* v7.0.8 · Fold/태블릿 회원페이지 상단 버튼은 늘리지 않고 왼쪽부터 배치 */
@media (min-width:600px) and (max-width:1024px){
  #dashboardApp>.member-page-topbar>.member-page-topbar-actions,
  #clubJoinApp>.member-page-topbar>.member-page-topbar-actions,
  #personalApp>.member-page-topbar>.member-page-topbar-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:center!important;
    width:100%!important;
    max-width:100%!important;
    gap:6px!important;
    margin:0!important;
  }
  #dashboardApp>.member-page-topbar>.member-page-topbar-actions>.button,
  #clubJoinApp>.member-page-topbar>.member-page-topbar-actions>.button,
  #personalApp>.member-page-topbar>.member-page-topbar-actions>.button{
    display:inline-flex!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:34px!important;
    margin:0!important;
    padding:6px 11px!important;
    justify-content:center!important;
    align-items:center!important;
    white-space:nowrap!important;
    font-size:.76rem!important;
  }
  #dashboardApp>.member-page-topbar>.member-page-topbar-actions>#logoutButton{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    justify-self:auto!important;
  }
}

/* v7.0.14 · personal-statistics 상단 3버튼 호환 */
@media (min-width:600px) and (max-width:899px){
  #personalApp>.member-page-topbar>.member-page-topbar-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}