/* stagePAN 조편성 전용 스타일 — common.css 토큰(var(--kt-…))만 쓴다 */

.teams [hidden] { display: none !important; }

/* ---- 설정 면 ---- */
.tm-setup {
  width: 100%;
  max-width: 760px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kt-space-3);
  text-align: center;
}
@media (max-width: 639px) {
  .tm-setup { padding: var(--kt-space-3) var(--kt-space-3); }
}
/* 결과 상태: 설정 잠금. 사용자 요청(2026-10-06)으로 흐림을 줄였다 — 0.5에 버튼 자체 비활성 0.4가 겹쳐 실제로는 0.2로 보였다.
   칸 전체 0.85 한 겹만 남기고, 안쪽 비활성 버튼의 흐림은 끈다. 잠김은 아래 안내 문구(.tm-lock-hint)로 알린다. */
.tm-setup.is-locked > :not(.tm-lock-hint) { opacity: 0.85; }
.tm-setup.is-locked .kt-seg > button:disabled,
.tm-setup.is-locked .kt-stepper__btn:disabled { opacity: 1; }
.tm-lock-hint { font-weight: 600; color: var(--kt-ink); }

/* 이름 입력칸 */
.tm-names {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--kt-space-1);
  text-align: left;
}
.tm-names__label {
  font-size: var(--kt-fs-s);
  font-weight: 600;
  color: var(--kt-ink-soft);
}
.tm-names__input {
  display: block;
  width: 100%;
  min-height: 9em;
  resize: vertical;
  padding: var(--kt-space-2) var(--kt-space-3);
  border: 2px solid var(--kt-ui-line);
  border-radius: var(--kt-space-3);
  background: var(--kt-surface);
  color: var(--kt-ink);
  font-size: var(--kt-fs-m);
  line-height: 1.5;
}
.tm-names__input:focus { border-color: var(--kt-ink); }
.tm-names__input::placeholder { color: var(--kt-ink-soft); opacity: 1; }
/* 오류: 색이 아니라 굵은 검정 테두리 + 문구로 알린다 */
.tm-names__input[aria-invalid="true"] {
  border-color: var(--kt-danger);
  box-shadow: inset 0 0 0 1px var(--kt-danger);
}

/* 총인원·팀 수 */
.tm-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kt-space-3) var(--kt-space-5);
}
.tm-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kt-space-1);
  min-width: 0;
}
.tm-control__title {
  font-size: var(--kt-fs-s);
  font-weight: 600;
  color: var(--kt-ink-soft);
}
.tm-num {
  width: 3.2ch;
  min-height: 48px;
}
.tm-num[aria-invalid="true"] { text-decoration: underline 3px; text-underline-offset: 0.2em; }
.tm-total {
  margin: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: var(--kt-fs-l);
  font-weight: 500;
}
.tm-total b {
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-xl);
  font-variant-numeric: tabular-nums;
}

.tm-preview {
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-m);
}
.tm-preview:empty,
.tm-errors:empty { display: none; }
.tm-errors {
  display: flex;
  flex-direction: column;
  gap: var(--kt-space-1);
}

/* ---- 섞기·결과 띠 ---- */
.tm-main { width: 100%; }
.tm-go { min-width: min(280px, 100%); }

.tm-strip .kt-board__sub { word-break: keep-all; }
.tm-strip .kt-board__result { font-size: clamp(32px, 7vw, 64px); }
.tm-strip .kt-board__result.is-long { font-size: clamp(26px, 5.5vw, 48px); }

/* ---- 팀 카드 ---- */
.tm-result { width: 100%; }
.tm-teams {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--kt-space-2);
  text-align: left;
}
@media (min-width: 768px) {
  .tm-teams {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--kt-space-3);
  }
}
.tm-team {
  min-width: 0;
  padding: var(--kt-space-3);
}
@media (max-width: 639px) {
  .tm-team { padding: var(--kt-space-2) var(--kt-space-3) var(--kt-space-3); }
}
.tm-team__head {
  margin: 0 0 var(--kt-space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kt-space-2);
  font-size: var(--kt-fs-m);
  line-height: 1.2;
}
/* 조 이름: 분홍 알약(면) + 검정 글자 */
.tm-team__name {
  padding: 0.2em 0.65em;
  border-radius: var(--kt-radius-s);
  background: var(--kt-primary);
  color: var(--kt-on-primary);
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: 1.3em;
  white-space: nowrap;
}
.tm-team__count {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--kt-ink-soft);
  white-space: nowrap;
}
.tm-team__members {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tm-team__members li {
  padding: 0.15em 0;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* 공개 연출: 1조부터 차례로 나타나며 이름이 채워진다(지연은 main.js가 넣는다, 전체 1.5초 이내) */
.tm-teams.is-animating .tm-team { animation: tm-card-in 260ms ease-out both; }
.tm-teams.is-animating .tm-team__members li { animation: tm-name-in 200ms ease-out both; }
@keyframes tm-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes tm-name-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- 결과 아래 버튼·복사 ---- */
.tm-actions { width: 100%; }
.tm-copy-msg:empty { display: none; }
.tm-copy-msg { font-weight: 600; color: var(--kt-ink); }
.tm-copy-box { width: 100%; max-width: 560px; }
.tm-copy-text { min-height: 6em; }

/* ---- 전체화면: 팀 카드가 화면을 채운다(글자 크기 --tm-fs는 main.js가 넘치지 않게 맞춘다) ---- */
.kt-is-fullscreen .teams { gap: var(--kt-space-2); }
.kt-is-fullscreen .tm-strip { padding-block: var(--kt-space-2); }
.kt-is-fullscreen .tm-strip .kt-board__result,
.kt-is-fullscreen .tm-strip .kt-board__result.is-long { font-size: min(6vw, 5vh); }
.kt-is-fullscreen .tm-strip .kt-board__sub { margin-top: 0; font-size: var(--kt-fs-s); }
.kt-is-fullscreen .tm-teams {
  font-size: var(--tm-fs, 24px);
  grid-template-columns: repeat(var(--tm-cols, 3), minmax(0, 1fr));
  gap: 0.5em;
}
.kt-is-fullscreen .tm-team {
  padding: 0.5em 0.8em 0.7em;
  border-radius: 1em;
}
.kt-is-fullscreen .tm-team__head { font-size: 1em; margin-bottom: 0.35em; }
.kt-is-fullscreen .tm-team__members {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.9em;
}
.kt-is-fullscreen .tm-team__members li { padding: 0; line-height: 1.3; }