/* 파티원정 화면(결정 AU 2026-09-28, AU9 분리) — screens_party.js 전용(.tpt-*). 공통 토큰만 쓴다(형광 녹·아군색 토큰 없음: 결정 AQ1 라이트 검정 원칙).
   직각·그림자 없음(D1), 본문 한 열(D4), 화면당 주 버튼 1개(D3). 공용 틀(.twb·.twb-sec·.twb-row·.twb-result)은 screens_battle.css를 따른다.
   결정 BS② 2단계(2026-09-29): 글자·간격·줄 간격 = 역할 토큰(직접 px는 테두리·크기에만). */

.tpt-sub { margin: 0; font-size: var(--fs-sub); color: var(--muted); overflow-wrap: anywhere; }
.tpt-center { text-align: center; }
.tpt-note { margin: 0; font-size: var(--fs-sub); color: var(--muted); border-left: 2px solid var(--line); padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); overflow-wrap: anywhere; }
.tpt-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tpt-chips:empty { display: none; }
.tpt-me { color: var(--fg-2); }
.tpt-acts { justify-content: stretch; }
.tpt-acts > .tw-btn { flex: 1 1 0; }
.tpt-acts > p { flex: 1 1 100%; }

/* ---- 카드 공용 ---- */
.tpt-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; padding: var(--sp-3); display: grid; gap: var(--sp-2); min-width: 0; }
.tpt-card > * { min-width: 0; }

/* ---- AU1 원정 보스 카드 ---- */
.tpt-bosses { display: grid; gap: var(--sp-3); }
.tpt-boss__name { margin: 0; font-size: var(--fs-strong); color: var(--foe); overflow-wrap: anywhere; }
.tpt-partlist { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sub); }
.tpt-partlist li { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: baseline; padding: var(--sp-1) 0; border-bottom: 1px solid var(--rule); }
.tpt-partlist li:last-child { border-bottom: 0; }
.tpt-partlist b { color: var(--fg); }
.tpt-partlist small { color: var(--muted); font-size: var(--fs-cap); }
.tpt-reward { margin: 0; font-size: var(--fs-sub); color: var(--gold); overflow-wrap: anywhere; }

/* ---- AU2 모집방 목록 ---- */
.tpt-bar { justify-content: stretch; }
.tpt-bar > .tw-btn { flex: 1 1 0; }
.tpt-search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); align-items: center; margin: 0; }
.tpt-search input { min-width: 0; width: 100%; min-height: 40px; }
.tpt-search .tw-btn { min-height: 40px; padding: var(--sp-2) var(--sp-3); }
.tpt-search:not(:has([data-cmd="search-clear"])) { grid-template-columns: minmax(0, 1fr) auto; }
.tpt-roomrow .twb-row__main > b { color: var(--fg-2); }
.tpt-count { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tpt-codejoin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: end; }
.tpt-codejoin label { display: grid; gap: var(--sp-1); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tpt-codejoin input { min-width: 0; width: 100%; min-height: 44px; letter-spacing: .12em; text-transform: uppercase; }   /* 방 번호(대문자 코드) 입력 — 코드라 자간 유지 */
.tpt-codejoin .tw-btn { min-height: 44px; }

/* ---- AU3 방 만들기 창(#tw-modal 재사용) ---- */
#tw-modal:has(.tpt-modal) { width: min(520px, calc(100% - 32px)); }
.tpt-modal__body { display: grid; gap: var(--sp-2); max-height: min(66vh, 580px); overflow-y: auto; }
.tpt-create { gap: var(--sp-3); }
.tpt-namefield { display: grid; gap: var(--sp-1); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tpt-namefield small { font-size: var(--fs-cap); color: var(--faint); }
.tpt-namefield input { min-width: 0; width: 100%; min-height: 40px; }
.tpt-create .tw-pick small { font-size: var(--fs-cap); line-height: var(--lh-base); }
/* 창은 .twb 밖(#tw-modal)이라 .twb select 모양이 닿지 않는다 → 같은 모양을 여기서(44px 터치 높이), 보스 이름이 길어 보스 칸을 넓게 */
.tpt-create select { font: inherit; font-size: var(--fs-body); width: 100%; min-width: 0; min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  background: transparent; color: var(--fg-2); }
.tpt-create select:focus { border-color: var(--accent); outline: 0; }
.tpt-create .twb-fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* ---- AU4 모집 중 ---- */
.tpt-room__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-2); flex-wrap: wrap; }
.tpt-room__name { margin: 0; font-size: var(--fs-strong); color: var(--fg-2); overflow-wrap: anywhere; }
.tpt-code { display: flex; align-items: center; gap: var(--sp-2) var(--sp-2); flex-wrap: wrap; margin: 0; font-size: var(--fs-body); }
.tpt-code b { font-size: var(--fs-title); letter-spacing: .18em; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--accent); font-variant-numeric: tabular-nums; user-select: all; }   /* 결정 CN: 반전 채움 → 인디고 선·글자 */
.tpt-code .tw-btn { min-height: 44px; padding: var(--sp-1) var(--sp-3); }

/* 자리 4칸: 모바일 2열 · 넓으면 4열 */
.tpt-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .tpt-seats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tpt-seat { display: grid; justify-items: center; align-content: start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; min-width: 0; text-align: center; }
.tpt-seat.is-me { border: 2px solid var(--fg-2); padding: calc(var(--sp-3) - 1px) calc(var(--sp-2) - 1px); }   /* 굵은 테두리 1px만큼 안쪽을 줄여 칸 크기 유지 */
.tpt-seat.is-empty { border-style: dashed; background: transparent; }
.tpt-seat__body { display: grid; justify-items: center; gap: var(--sp-1); min-width: 0; width: 100%; }
.tpt-seat__name { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-1); margin: 0; font-size: var(--fs-body); }
.tpt-seat__name b { color: var(--fg-2); overflow-wrap: anywhere; }
.tpt-seat__job, .tpt-seat__meta { margin: 0; font-size: var(--fs-cap); color: var(--muted); overflow-wrap: anywhere; }
.tpt-seat__meta b { color: var(--fg); }
.tpt-seat.is-empty .tpt-seat__name b { color: var(--faint); }

/* 아바타 초상(승인 시작 아바타 256×384 도트 → 축소, 없으면 계열 글자 칸) */
.tpt-ava { display: grid; place-items: center; width: 64px; height: 96px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; overflow: hidden; flex: none; }   /* 결정 CN2: 아바타 칸도 바탕 한 가지 */
.tpt-ava img { width: 64px; height: 96px; object-fit: contain; object-position: center bottom; image-rendering: pixelated; display: block; }
.tpt-ava b { font-size: var(--fs-bignum); color: var(--muted); }
.tpt-ava.is-empty { border-style: dashed; background: transparent; }
.tpt-ava.is-empty b { color: var(--faint); }
.tpt-ava.is-sm { width: 40px; height: 60px; }
.tpt-ava.is-sm img { width: 40px; height: 60px; }
.tpt-ava.is-sm b { font-size: var(--fs-section); }

.tpt-ready .tw-actions .tw-btn { flex: 1 1 0; }
.tpt-more > summary { padding-left: 0; padding-right: 0; }
/* 결정 CG4 D1(2026-09-29): 첫 화면 보스 카드의 부위·기믹 전문은 기본 접힘 */
.tpt-bossmore > summary small { color: var(--muted); font-weight: 400; font-size: var(--fs-cap); }
.tpt-bossmore[open] { display: grid; gap: var(--sp-2); }

/* ---- 부위 카드(AU5) ---- */
.tpt-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.tpt-part { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--foe); border-radius: var(--radius-sm); background: transparent; min-width: 0; }
.tpt-part.is-dead { border-color: var(--line); opacity: .75; }
.tpt-part.is-dead .tpt-part__head b { text-decoration: line-through; }
.tpt-part__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin: 0; }
.tpt-part__head b { color: var(--foe); overflow-wrap: anywhere; }
.tpt-part__head small { font-size: var(--fs-cap); color: var(--muted); overflow-wrap: anywhere; }

/* ---- 진행 현황(AU5) ---- */
.tpt-steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-1); }
.tpt-steps.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tpt-steps.is-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
/* 결정 CN: 옛 네모 칸 진행(DOS) → 가는 둥근 조각 막대(트랙·채움만 색 — 막대 예외). 지금 = 주의색, 지난 = 인디고 */
.tpt-steps i { display: block; height: 6px; border-radius: 999px; background: var(--track); }
.tpt-steps i.is-done { background: var(--accent); }
.tpt-steps i.is-now { background: var(--warn); }

/* 파티원 칸 */
.tpt-crew { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.tpt-mate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; }
.tpt-mate.is-now { border-color: var(--warn); }   /* 지금 차례 = 주의색 외곽선(결정 CN — 옛 굵은 왼쪽 띠 없음) */
.tpt-mate.is-me .tpt-seat__name b { text-decoration: underline; text-underline-offset: 3px; }
.tpt-mate__body { display: grid; gap: var(--sp-1); min-width: 0; }
.tpt-mate .tpt-seat__name { justify-content: flex-start; }
.tpt-wait { flex: 1 1 100%; }
.tpt-lastrec { display: flex; justify-content: center; }

/* ---- AU6 전투 기록 화면 ---- */
.tpt-bv-sub { margin: 0; text-align: center; font-size: var(--fs-body); color: var(--muted); overflow-wrap: anywhere; }
.tpt-bv-nav { justify-content: stretch; }
.tpt-bv-nav .tw-btn { flex: 1 1 0; }

@media (max-width: 480px) {
  #tw-modal:has(.tpt-modal) { width: 100%; }
  .tpt-modal__body { max-height: 62vh; }
}
@media (max-width: 380px) {
  .tpt-seat { padding: var(--sp-2) var(--sp-1); }
  .tpt-code b { font-size: var(--fs-section); letter-spacing: .12em; }
  .tpt-search .tw-btn { padding: var(--sp-2) var(--sp-2); }
  .tpt-create .twb-fields { grid-template-columns: minmax(0, 1fr); }
}

/* 결정 BR(2026-09-28): 부위 기믹 설명 · 공유 기믹 */
.tpt-gim { color: var(--muted); overflow-wrap: anywhere; }
.tpt-sharedlist { margin: 0; padding-left: var(--sp-4); font-size: var(--fs-sub); color: var(--fg); display: grid; gap: var(--sp-1); }
.tpt-shared { font-size: var(--fs-sub); }
.tpt-sharedlog { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); font-size: var(--fs-cap); color: var(--muted); display: grid; gap: var(--sp-1); }