/* 운영 화면 /operations (헤드코치·매니저·코치·대표) UX 정리, 2026-10-08. docs/UX-UI-STANDARD.md 기준.
   휴대폰 390px에서 글자 쪼개짐·잘림·가로 스크롤이 없도록. 상단 바(app-header)는 회원모드 작업에서 따로 다룬다. */

/* ---- 센터 TV 카드: 5줄 안내문 대신 4단계 순서 칩. loadStatus가 지금 단계(.now)와 → 다음 단계(.next)를 표시한다. */
.tv-flow{margin:12px 0 2px}
.tv-flow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tv-flow-steps li{display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 4px;border:1px solid var(--line,#3b433b);border-radius:999px;font-size:13px;font-weight:700;color:var(--muted,#9fac97);white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.tv-flow-steps li.now{background:var(--lime,#ddf878);border-color:var(--lime,#ddf878);color:#11140f}
.tv-flow-steps li.next{border-color:rgba(221,248,120,.6);color:#eef3e8}
.tv-flow-more{margin-top:6px}
.tv-flow-more>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;font-size:13px;color:var(--muted,#9fac97);cursor:pointer;list-style:none}
.tv-flow-more>summary::-webkit-details-marker{display:none}
.tv-flow-more>summary span{white-space:nowrap}
.tv-flow-more>summary b{flex:none;color:var(--lime,#ddf878);font-weight:700;white-space:nowrap}
.tv-flow-more>summary b::after{content:' ▾'}
.tv-flow-more[open]>summary b::after{content:' ▴'}
.tv-flow-more ul{margin:2px 0 4px;padding-left:18px;font-size:13px;line-height:1.7;color:var(--muted,#9fac97);word-break:keep-all}

/* 카드 머리: 'TV 화면 열기' 버튼 글자는 한 줄로 (360px에서 버튼 안 줄바꿈되던 문제). */
.tv-ops .section-head .button{white-space:nowrap}

/* 접는 칸 제목: 핵심어만 굵게, 보조 설명은 옅게. 휴대폰에서는 보조 설명을 숨겨 한 줄로. */
.tv-ops .tv-ops-block>summary{word-break:keep-all}
.tv-ops .tvo-sub{font-size:inherit;font-weight:500;color:var(--muted,#9fac97)}

/* ---- 참여·기록 현황: 데스크톱 표는 그대로, 측정값의 날짜·난이도는 아랫줄로 (값과 날짜가 붙어 보이던 문제). */
.ops-insight-table td small{display:block;margin-top:2px;color:var(--muted,#9fac97)}
.ops-insight-table .ops-empty{color:#6f7b69}
.ops-people{display:none}

@media (max-width:720px){
  /* 휴대폰·작은 태블릿: 640px 표 대신 사람별 카드 한 줄. 카드를 누르면 일일 기록이 펼쳐진다. */
  .ops-insights .ops-insight-table-wrap{display:none}
  /* 숫자 요약 4칸: 숫자와 이름을 한 줄로 붙여 높이를 반으로. */
  .ops-insights .ops-insight-stats{gap:8px;margin:12px 0 10px}
  .ops-insights .ops-insight-stats>div{display:flex;align-items:baseline;gap:8px;padding:10px 14px;min-width:0}
  .ops-insights .ops-insight-stats strong{display:inline;font-size:22px;line-height:1.2}
  .ops-insights .ops-insight-stats span{font-size:12px;white-space:nowrap}
  .ops-people{display:block;margin-top:4px}
  .op-card,.op-quiet{margin:0}
  .op-card{border-bottom:1px solid var(--line,#3b433b)}
  .op-card>summary,div.op-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:11px 2px;line-height:1.35;list-style:none}
  .op-card>summary{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .op-card>summary::-webkit-details-marker{display:none}
  .op-name{font-size:15px;font-weight:700;color:#f1f3eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .op-daily{font-size:13px;font-weight:700;color:var(--lime,#ddf878);white-space:nowrap}
  details.op-card .op-daily::after{content:'';display:inline-block;width:6px;height:6px;margin:0 2px 0 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .15s}
  details.op-card[open] .op-daily::after{transform:translateY(0) rotate(-135deg)}
  div.op-card .op-daily{color:#6f7b69;font-weight:600}
  .op-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 0;font-size:12px;font-weight:500;color:var(--muted,#9fac97);white-space:nowrap}
  .op-meta>span+span::before{content:'·';margin:0 7px;color:#5d6858}
  .op-phase.on{color:#eef3e8;font-weight:700}
  .op-logs{padding:0 2px 12px}
  .op-logs p{margin:6px 0 0;font-size:13px;line-height:1.5;color:#bbc9b5;word-break:keep-all}
  .op-quiet>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 2px;font-size:13px;font-weight:700;color:var(--muted,#9fac97);cursor:pointer;list-style:none;word-break:keep-all}
  .op-quiet>summary::-webkit-details-marker{display:none}
  .op-quiet>summary::after{content:'';flex:none;width:6px;height:6px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
  .op-quiet[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
  .op-quiet p{margin:0 2px 12px;font-size:13px;line-height:1.75;color:#bbc9b5;word-break:keep-all}
}

@media (max-width:600px){
  /* 첫 화면에 TV 버튼까지 보이도록 운영 화면 제목을 줄인다 (운영 화면에서만: 제목 바로 다음이 TV 카드). */
  .page-title:has(+ .tv-ops){padding:14px 0 12px}
  .page-title:has(+ .tv-ops) h1{font-size:26px;line-height:1.3;letter-spacing:-.6px;margin:4px 0 0}
  .page-title:has(+ .tv-ops) p{display:none}
  .tv-ops .tvo-sub{display:none}

  /* WOD 등록: 휴대폰은 1열(세트 수·휴식만 2열), 칸 높이 48px 통일, 선택값·예시 문구가 잘리지 않게. */
  #tv-wod-form .tvw-head-grid{grid-template-columns:minmax(0,1fr)}
  #tv-wod-form .tvw-struct-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  #tv-wod-form .tvw-struct-grid>[data-rounds-field]{grid-column:1/-1}
  #tv-wod-form label>input:not([type=checkbox]):not([type=radio]):not([type=hidden]),#tv-wod-form label>select:not([multiple]):not([size]),#tv-wod-form .tvw-rounds input:not([type=hidden]){min-height:48px;box-sizing:border-box}
  #tv-wod-form input[type=date]{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
}

@media (max-width:380px){
  /* 360·375px 휴대폰: 카드 제목과 'TV 화면 열기'가 한 줄에 들어가게 조금 줄인다. */
  .tv-ops .section-head h2{font-size:22px}
  .tv-ops .section-head .button{padding-left:12px;padding-right:12px;font-size:14px}
  /* ← 이전 화면 / 다음 화면 → 도 한 줄. */
  .tv-ops .tv-remote button{padding:0 8px;font-size:16px;white-space:nowrap}
  /* WOD 등록: 세트·휴식과 스트렙스 칸도 1열, 좌우 여백을 조금 줄여 예시 문구가 칸 안에 다 들어가게. */
  #tv-wod-form .tvw-struct-grid,#tv-wod-form .tvw-strength-grid{grid-template-columns:minmax(0,1fr)}
  #tv-wod-form label>input:not([type=checkbox]):not([type=radio]):not([type=hidden]),#tv-wod-form label>select:not([multiple]):not([size]){padding-left:8px;padding-right:8px}
}

/* iOS Safari: 날짜 칸이 고유 폭 때문에 옆 칸을 침범하지 않게 (대표 아이폰 10/8). */
@supports (-webkit-touch-callout:none){
  #tv-wod-form input[type=date]{-webkit-appearance:none;appearance:none;text-align:left}
  #tv-wod-form input[type=date]::-webkit-date-and-time-value{text-align:left}
}