/* ── 의도적으로 스타일 없는 구조 훅 ──
   아래 클래스는 DOM 에 붙지만 전용 CSS 규칙이 없다. 상속만으로 정확히 의도한 대로 렌더되므로
   규칙을 만들지 않는다. "정의 없는 클래스" 차집합 검사가 이것들을 누락으로 잡으면 이 목록을
   보고 통과시켜라(매 태스크마다 다시 판정하지 않도록 여기 남긴다).
     .toast-info — `toast(msg)` 기본 kind. `.toast` 베이스가 padding·border·background·
                   color·box-shadow 를 전부 정의하고, `.toast-error` 는 테두리색만 덧입힌다.
   새 kind 를 늘리는 태스크는 `.toast-<kind>` 정의를 함께 넣을 것(app.css 주석 참고). */

.board { display: flex; flex-direction: column; gap: 14px; }

/* ── 주차 스트립 ── */
.week { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; }
.week-label { margin: 0; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
/* 자동 초기화가 꺼져 있을 때만 나온다. 상태 표시이지 제목이 아니므로 한 단 낮춘다. */
.week-note { font-family: var(--body); font-weight: 500; font-size: 13px; color: var(--sub); letter-spacing: 0; }
.week-who { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.week-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amethyst); box-shadow: 0 0 9px rgba(166, 107, 245, 0.85); }

.offline {
  margin: 0; padding: 9px 14px;
  border: 1px solid rgba(166, 107, 245, 0.45); border-left-width: 2px;
  border-radius: var(--radius-slot); background: rgba(166, 107, 245, 0.06);
  font-size: 12.5px;
}

/* ── 요일 탭 — 유리 세그먼트 컨트롤 ── */
.days {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 7px;
  background: rgba(255, 255, 255, 0.030);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-panel);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.day {
  position: relative; flex: 1 0 auto; min-width: 78px; min-height: 50px;
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
  padding: 13px 8px;
  border: 1px solid transparent; border-radius: var(--radius-slot);
  background: transparent; color: var(--quiet);
  font-size: 15px; font-weight: 500;
  transition: background 160ms ease, color 160ms ease;
}
.day:hover { background: rgba(255, 255, 255, 0.045); }

/* 인원수는 기본이 "없음" 이다 — 그 위에 사람이 있는 요일만 불을 켠다.
   예전에는 0인 요일을 흐리게 하는 뺄셈만 있었다. 그러면 "사람이 있다" 가 기본 상태와 같은
   모양이라 신호가 되지 못하고, 한 줄을 훑어서 어느 요일에 모였는지 읽을 수 없다. */
.day-count {
  font-size: 12.5px; color: var(--sub);
  padding: 2px 8px; border-radius: 999px;
  background: transparent;
  transition: background 160ms ease, color 160ms ease;
}
.day:not(.is-zero) .day-count {
  color: var(--ether);
  background: rgba(107, 227, 245, 0.14);
  font-weight: 600;
}
/* 0인 요일은 한 단 흐리게 — 단 비활성 탭에 한정한다(opacity 는 쓰지 않는다).
   선택된 탭은 배경이 0.085 만큼 들려 있어 흐린 색이 4.07:1 까지 떨어졌고(리뷰 I-3),
   그 상태가 매주 수요일 06:00 직후 모두가 보는 기본 화면이었다.
   흐린 색으로 쓰던 --dim(#8A86A6)은 그 리프트 위에서도(4.07) hover 리프트 위에서도(4.24)
   AA 에 못 미쳤고, AA 를 넘기려면 --sub 와 눈으로 구분되지 않는 값까지 밝혀야 했다(리뷰 M-2).
   그래서 --sub 를 쓴다 — 라벨이 --quiet(11.47:1)에서 --sub(6.93:1)로 한 단 내려가는 것이
   0 신호이고, 날짜·인원수는 이미 --sub 이므로 그대로다. */
.day.is-zero:not(.is-on) { color: var(--sub); }

/* 선택된 요일. 이 탭이 아래 명단을 소유한다는 것이 한눈에 보여야 한다 —
   안 그러면 사람이 아래 빈 컬럼만 보고 "왜 아무도 없지" 라고 읽는다. 자기가 월요일을
   보고 있다는 것을 모르기 때문이다(실사용 피드백). 크기·면·테두리·밑줄 네 축을 함께 쓴다. */
.day.is-on {
  background: rgba(255, 255, 255, 0.10); border-color: rgba(107, 227, 245, 0.34); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px -16px rgba(0, 0, 0, 0.95);
}
.day.is-on .day-label { font-weight: 700; font-size: 16.5px; }
/* 선택됐지만 아무도 없는 요일. 인원수까지 켜면 "있다" 로 잘못 읽힌다 — 0은 0으로 둔다. */
.day.is-on.is-zero .day-count { color: var(--sub); background: transparent; font-weight: 500; }

/* 아래를 가리키는 밑줄. 위쪽 1px 이 아니라 아래쪽 2px 인 이유는 방향이다 —
   탭과 명단이 이어져 있다는 것을 선이 직접 말한다(광선과 같은 액센트 언어). */
.day.is-on::before {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(107, 227, 245, 0), rgba(107, 227, 245, 0.95) 38%, rgba(166, 107, 245, 0.8) 72%, rgba(166, 107, 245, 0));
  box-shadow: 0 0 10px rgba(107, 227, 245, 0.6);
}

/* ── 보드 ── */
/* 3열이 슬롯을 무너뜨리지 않는 폭에서만 3열이 된다. 슬롯 고정 크롬이 226px(패딩 20 +
   트랙 166 + gap 40)이라 컬럼이 305px 로 좁아지면 이름 칸이 45px 로 사라진다(리뷰 I-1).
   1350px 미만에서는 2열로 내려가 이름 칸을 지킨다. .layout 의 max-width 와 함께 봐야 한다. */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 14px; align-items: start; }
.col { padding: 16px; }
/* ★ 시그니처 — 광선 궤도. 컬럼 왼쪽을 위에서 아래까지 관통한다.
   헤더의 정원 게이지와 슬롯의 역할 광선은 모두 이 궤도 위에 켜진 구간이다.
   알파가 패널 배경과 같은 0.055 였을 때는 패널 위에서 1.17:1 이라 선으로 보이지 않았고,
   빈 컬럼에서 "0명" 신호 역할을 못 했다(리뷰 M-3). 선으로 읽히는 최소치까지만 올린다 —
   더 올리면 컬럼을 가르는 구분선이 되어 시그니처가 아니라 테두리로 보인다. */
.col::before {
  content: ''; position: absolute; left: 16px; top: 17px; bottom: 16px;
  width: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.11);
}

.col-head {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; align-items: baseline;
  padding: 2px 0 13px 12px;
  border-bottom: 1px solid var(--edge-soft);
}
.col-name { font-size: 18px; letter-spacing: -0.015em; line-height: 1.2; }
/* 큰 정원 수치는 Sora 다(스펙 9절). mono 로 두면 위계가 죽는다. */
.col-cap {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.col-cap-max { font-size: 13px; font-weight: 500; color: var(--sub); letter-spacing: 0; }
.col.is-full .col-cap { color: var(--amethyst); }
.col-full {
  margin-left: 8px; padding: 2px 8px;
  border: 1px solid rgba(166, 107, 245, 0.4); border-radius: 5px;
  color: var(--amethyst); font-family: var(--body); font-size: 12px; font-weight: 500;
}
/* 구성표 — 있는 직업만 늘어놓는다. 색은 app.css 의 `.col-classes b` 한 규칙이 맡는다. */
.col-classes { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: 3px 9px; font-size: 12px; }
.col-classes b { font-weight: 600; letter-spacing: 0.01em; }
.col-classes .mono { font-weight: 500; }
.col-acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.col-acts .btn-primary, .col-acts .btn-joined { flex: 1; }

/* 정원 게이지 = 궤도 위에 켜진 구간. 세그먼트 높이는 JS 인라인 값이므로 덮지 않는다.
   drop-shadow 는 채워진 픽셀에서만 나오므로 0/100 에서는 글로우도 없다. */
.gauge {
  position: absolute; left: 0; top: 1px; width: 2px; height: 62px;
  border-radius: 2px; overflow: hidden;
  display: flex; flex-direction: column;
  filter: drop-shadow(0 0 5px rgba(107, 227, 245, 0.55));
}
.gauge-fill { display: block; width: 100%; flex: 0 0 auto; background: var(--ether); }

/* 모바일 전용 접기 토글 */
.col-fold { display: none; }

/* ── 슬롯 ── */
.col-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.slot {
  position: relative;
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 50px 44px 52px;
  column-gap: 10px; align-items: center;
  padding: 8px 8px 8px 12px;
  border-radius: var(--radius-slot);
  transition: background 160ms ease;
}
.slot:hover { background: rgba(255, 255, 255, 0.035); }
/* ★ 시그니처 — 역할 광선. 궤도와 같은 x 좌표(컬럼 내용 왼쪽 끝)에 놓인다. */
.slot::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--ray) 0%, var(--ray) 34%, rgba(255, 255, 255, 0.06) 96%);
  box-shadow: 0 0 12px 0 color-mix(in srgb, var(--ray) 58%, transparent);
}
/* 광선 색은 .cls-<slug> 가 정한 --cls 를 그대로 쓴다(app.css). 글로우는 같은 색을
   color-mix 로 옅게 만든다 — 직업마다 rgba 를 따로 적어 두면 색을 바꿀 때 두 곳이 어긋난다. */
.slot { --ray: var(--cls, var(--cls-etc)); }

/* 내 자리는 행이 들린다 — 100행에서 테두리 색조 차이로는 찾을 수 없다. */
.slot.is-mine {
  background: rgba(255, 255, 255, 0.085);
  box-shadow: inset 0 0 0 1px rgba(107, 227, 245, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.slot.is-mine:hover { background: rgba(255, 255, 255, 0.105); }
.slot.is-leaving { opacity: 0.45; }

/* 직업은 색 단독으로 인코딩하지 않는다 — 광선 옆에 앞 글자를 병기한다(색약 대응).
   9색 전부 지면·내 자리·hover 세 배경에서 AA 를 넘는다(app.css 의 --cls-* 주석 참고). */
.slot-mark { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--cls, var(--cls-etc)); }

.slot-names { min-width: 0; }
.slot-user, .slot-char {
  display: block; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-user { font-size: 12px; color: var(--sub); letter-spacing: 0.01em; }
/* 내 자리 행은 배경이 들려 있어(0.085, hover 0.105) --sub 가 4.59 → hover 4.39 로 떨어진다
   (리뷰 M-2). 한 단 밝은 --quiet 로 올려 두 상태 모두 여유를 둔다 — 내 자리를 강조하는
   방향과도 어긋나지 않는다. */
.slot.is-mine .slot-user { color: var(--quiet); }
.slot-char { margin-top: 1px; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
/* 서버명은 캐릭터명 뒤 보조 정보다 — 굵기·색을 낮춰 캐릭명과 경쟁하지 않게 한다.
   .slot-class 와 같은 --sub 토큰(패널 위 6.9:1)을 그대로 쓴다(새 색 도입 없음). */
.slot-server { margin-left: 1px; font-weight: 400; color: var(--sub); }
.slot-class { font-weight: 500; color: var(--sub); }
.slot-num { text-align: right; font-size: 12.5px; letter-spacing: -0.02em; }
.slot-il { font-weight: 400; color: var(--sub); }

/* position: relative — 캐릭터 교체 드롭다운(.pick)이 이 칸을 기준으로 열린다 */
.slot-acts { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.slot-swap, .slot-out {
  width: 24px; height: 24px;                     /* WCAG 2.2 SC 2.5.8 최소 타겟 */
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px;
  background: transparent; color: var(--sub);
  font-size: 12px; line-height: 1;
  transition: color 140ms ease, border-color 140ms ease;
}
.slot-swap:hover, .slot-out:hover { color: var(--ether); border-color: rgba(107, 227, 245, 0.45); }

/* ── 포스 묶음 ──
   예전에는 머리글과 사람이 형제로 나란히 놓인 평평한 목록이었다. 그러면 머리글이 "여기서
   시작한다" 만 말하고 "여기서 끝난다" 를 말하지 못해, 포스가 두 개 이상이면 어디까지가
   한 포스인지 읽히지 않았다. 이제 포스마다 상자를 하나 두고 그 상자가 범위를 그린다.
   .col-list 의 gap 은 상자 사이 간격을 .force 의 margin 이 갖도록 0 으로 둔다. */
.col-list.is-grouped { gap: 0; }

.force {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 8px 8px 9px;
  border: 1px solid var(--edge-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.028);
}
.force:first-child { margin-top: 2px; }
.force-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }

/* 면 위에 밑줄까지 있으면 경계가 두 번 그어진다. 머리글은 글자 위계로만 말한다. */
.force-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 1px 2px 5px;
  padding: 0 4px;
}
.force-name { font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.force-n { font-size: 12px; color: var(--sub); }

/* 미지정은 아직 편성되지 않은 사람들이다. 편성이 끝난 묶음과 같은 무게로 그리면 세 번째
   포스처럼 읽혀서, 구성하는 사람이 어디를 손봐야 하는지 보이지 않는다. */
.force.is-rest { background: transparent; border-style: dashed; }
.force.is-rest .force-name { color: var(--quiet); }

/* 면이 2.8% 라 기본 hover(3.5%)는 그 위에서 거의 구분되지 않는다. 상자 안에서만 한 단 올린다. */
.force .slot:hover { background: rgba(255, 255, 255, 0.06); }

/* 빈 칸 — 궤도가 그 위를 어둡게 지나가는 것이 '0명' 신호다. */

.slot-empty {
  padding: 30px 18px 30px 22px; border-radius: var(--radius-slot);
  background: rgba(255, 255, 255, 0.022);
  color: var(--sub); font-size: 12.5px; line-height: 1.75;
}
/* 요일 이름만 한 단 올린다 — 이 문장을 읽는 이유가 그 단어이기 때문이다. */
.slot-empty-day { color: var(--quiet); font-weight: 600; }

/* ── 51칸 이상: 압축 2열(스펙 8-2) ──
   좁은 셀에서는 유저명·직업·아이템레벨을 접는다(li 의 title 로 남는다).
   단 내 자리는 두 칸을 다 쓰고 조작 버튼을 유지한다 — 많아도 10행이다. */
.col-list.is-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; }
.col-list.is-dense .slot {
  grid-template-columns: 18px minmax(0, 1fr) 46px;
  column-gap: 8px; padding: 5px 4px 5px 10px;
}
.col-list.is-dense .slot-user,
.col-list.is-dense .slot-class,
.col-list.is-dense .slot-il,
.col-list.is-dense .slot-acts { display: none; }
/* 압축 모드는 이름 칸이 2열로 쪼개져 좁다. 여기서 (루드라) 를 남기면 그 폭을 서버명이
   먹고 정작 캐릭명이 잘린다 — 100명이 한 칸에 있는 화면은 대개 같은 서버라 서버명이
   가장 쓸모없는 자리이기도 하다. 잘린 값은 li 의 title 에 남는다. */
.col-list.is-dense .slot-server { display: none; }
/* 묶였을 때는 2열 격자를 .col-list 가 아니라 .force-list 가 가진다. .col-list 의 항목은
   포스 상자이고, 그것을 2열로 깔면 포스 두 개가 나란히 서면서 각 상자가 반쪽 폭이 된다.
   사람만 2열로 깔고 상자는 세로로 쌓는다. */
.col-list.is-dense.is-grouped { grid-template-columns: minmax(0, 1fr); }
.col-list.is-dense .force-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; }
.col-list.is-dense .force-list .slot.is-mine { grid-column: 1 / -1; }
.col-list.is-dense .slot-char { margin-top: 0; font-size: 12px; }
.col-list.is-dense .slot-num { font-size: 12px; }
.col-list.is-dense .slot.is-mine {
  grid-column: 1 / -1;
  grid-template-columns: 20px minmax(0, 1fr) 50px 44px 52px;
  column-gap: 10px; padding: 8px 8px 8px 12px;
}
.col-list.is-dense .slot.is-mine .slot-user,
.col-list.is-dense .slot.is-mine .slot-il { display: block; }
.col-list.is-dense .slot.is-mine .slot-acts { display: flex; }
.col-list.is-dense .slot.is-mine .slot-char { margin-top: 1px; font-size: 13px; }

@media (max-width: 720px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .week { flex-direction: column; align-items: flex-start; gap: 9px; }
  /* 요일 7개를 격자로 고정한다. flex-wrap 이면 폭에 따라 4+3·3+3+1 로 들쭉날쭉 갈려
     주 단위 리듬이 깨졌다(리뷰 M-6). */
  .days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 이름 칸을 넓힌다 — 원래는 압축(51칸+)만 트랙을 줄여서 50칸 이하가 오히려 더 좁아지는
     역전이 있었다(360px 에서 72px / 캐릭명 5자). 두 밀도에 같은 4트랙을 적용한다(리뷰 M-1).
     아이템레벨은 접고, 잘린 이름은 li 의 title 로 남는다. */
  .col-list .slot,
  .col-list .slot.is-mine { grid-template-columns: 20px minmax(0, 1fr) 50px 52px; column-gap: 8px; }
  .col-list .slot-il { display: none; }
  /* 좁은 화면에서는 2열을 풀고 모든 행이 조작 버튼을 갖는다 */
  .col-list.is-dense { grid-template-columns: minmax(0, 1fr); }
  /* 아래 두 줄은 특이성 때문에 필요하다 — 압축 기본 규칙의 `.col-list.is-dense .slot.is-mine`
     (5트랙)과 `… .slot-il { display: block }` 이 위의 4트랙·숨김보다 특이성이 높다.
     빼면 내 자리 행만 자식 5개가 4트랙에 들어가 조작 버튼이 다음 줄로 흐른다. */
  .col-list.is-dense .slot,
  .col-list.is-dense .slot.is-mine { grid-template-columns: 20px minmax(0, 1fr) 50px 52px; column-gap: 8px; }
  .col-list.is-dense .slot.is-mine .slot-il { display: none; }
  .col-list.is-dense .slot-acts { display: flex; }
  /* 사람 2열도 함께 푼다. 위의 `.col-list.is-dense`(1열)는 이제 포스 상자에만 걸리므로,
     상자 안의 격자를 따로 되돌리지 않으면 좁은 화면에서 사람만 2열로 남는다. */
  .col-list.is-dense .force-list { grid-template-columns: minmax(0, 1fr); }
  /* 상자 안쪽 여백을 줄여 이름 칸을 지킨다 — 360px 에서는 16px 도 캐릭명 한 자다. */
  .force { padding: 7px 5px 8px; }
  /* 컬럼 접기 — 접어도 헤더의 n/100·게이지·역할 집계·참여 버튼은 남는다 */
  .col-fold {
    display: block; grid-column: 1 / -1;
    width: 100%; min-height: 44px; margin-top: 10px;
    border: 1px solid var(--edge); border-radius: var(--radius-slot);
    background: transparent; color: var(--sub); font-size: 12px;
  }
  .col.is-folded .col-list { display: none; }
}

/* ── 컬럼 이미지 캡처(T18) ──────────────────────────────────────────────
   화면 밖 전용 노드에만 붙는 규칙이다. html2canvas 가 못 그리는 것을 피한다:
   backdrop-filter 없음, 반투명 배경 대신 불투명 색, 그림자 없음.
   색은 CSS 변수 대신 리터럴을 쓴다 — html2canvas 는 스테이지를 클론한 iframe 에서
   계산값을 다시 읽는데, 거기서 var() 가 풀리지 않으면 통째로 검은 그림이 나온다. */
/* 화면 밖에 세워 두는 무대. display:none 은 쓸 수 없다 — 박스가 잡히지 않으면
   html2canvas 가 아무것도 그리지 못한다. 폭만 capture.js 가 인라인으로 정한다. */
.cap-stage { position: fixed; left: -10000px; top: 0; }
.cap { background: #0B0A14; color: #EDEBF5; padding: 28px; font-family: var(--body); }
.cap-head { border-bottom: 1px solid rgba(255, 255, 255, .12); padding-bottom: 14px; }
.cap-title { font-family: var(--display); font-size: 26px; margin: 0; }
.cap-meta { color: #9A96B5; font-size: 14px; margin: 6px 0 0; }

/* 열 나눔은 JS(splitColumns)가 한다. column-count 를 쓰면 포스 머리글과 그 멤버가
   서로 다른 열로 갈려도 막을 방법이 없다. */
.cap-cols { display: grid; gap: 0 18px; align-items: start; margin-top: 18px; }   /* 18px = capture.js 의 COLUMN_GAP */
.cap-col { list-style: none; margin: 0; padding: 0; }

.cap-row {
  display: grid; grid-template-columns: 3px 20px minmax(0, 1fr) auto auto 46px;
  align-items: center; gap: 8px;
  padding: 7px 8px; margin-bottom: 6px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px;
  background: #15131F;
}
.cap-ray { width: 3px; height: 18px; border-radius: 2px; }
.cap-icon { width: 20px; height: 20px; border-radius: 6px; display: block; }
/* PNG 가 없는 직업(현재 권성)만 첫 글자 배지. color·border-color 는 인라인 역할색 */
.cap-badge {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 6px; background: rgba(255, 255, 255, .05);
  font-size: 12px; font-weight: 600;
}
.cap-char { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 서버명은 캐릭명과 같은 칸을 쓰되 한 단계 죽인다 — 화면(.slot-server)과 같은 표기다.
   여기는 폭을 내가 정하는 1180px 3열이라 화면의 압축 모드처럼 접을 이유가 없다. */
.cap-server { color: #9A96B5; font-size: 11px; }
.cap-class, .cap-user { color: #9A96B5; font-size: 12px; white-space: nowrap; }
.cap-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; }

/* 포스 묶음 상자. 화면(.force)과 같은 어법이다 — 상자가 포스의 범위다.
   화면과 달리 줄(.cap-row)이 이미 불투명한 카드라, 상자는 그보다 어두운 면을 깔아
   줄들이 그 위에 얹힌 것으로 읽히게 한다(반투명은 html2canvas 에서 못 믿는다). */
.cap-group {
  margin-bottom: 14px; padding: 10px 10px 5px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  background: #100E1A;
}
.cap-group:last-child { margin-bottom: 0; }
/* 미지정은 아직 편성되지 않은 사람들이다 — 화면과 같이 점선으로만 두른다. */
.cap-group.is-rest { background: transparent; border-style: dashed; }
.cap-group-list { list-style: none; margin: 0; padding: 0; }

.cap-force {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 0 8px; padding: 0 4px;
  font-family: var(--display); font-size: 14px;
}
.cap-force-name { color: #EDEBF5; }
.cap-group.is-rest .cap-force-name { color: #C7C3DA; }
.cap-force-n { font-family: var(--mono); font-size: 12px; color: #9A96B5; }