/* 랭킹 화면 #/m/ranking — 결정 BP1~BP6·BZ2·CA3(2026-09-28). screens_ranking.js.
   새 UI 기준(결정 BU·BV·BS): 역할 토큰만(글자 --fs-*, 줄 간격 --lh-*, 간격 --sp-*), 직접 px는 테두리 1~3px만. 공용 칩·태그·탭 모양은 바꾸지 않는다.
   누름 영역 44 = --sp-6 + --sp-3. 표·수치·이름은 고정폭(긴 글 가변폭 대상 아님). 1~3위 색은 --rank-1..3(새 색값 없음, 색과 함께 '1위' 글자).
   휴대폰 = 두 줄 카드, ≥600px = 한 줄 표(머리 줄), ≥840px = 표 + 오른쪽 요약(결정 BU6). */
.tw-rk, .tw-rk-kwrap { min-width: 0; }   /* 가로 스크롤 탭·칩 줄의 폭이 화면 폭을 밀어내지 않게 */
.tw-rk-kwrap:empty { display: none; }
.tw-rk-card { gap: var(--sp-3); }
.tw-rk-groups > button, .tw-rk-kinds > button { gap: var(--sp-2); }
.tw-rk-groups .tw-li, .tw-rk-kinds .tw-li { flex: none; }

/* 도구: 보스·난이도 / 던전 · 계열 · 차수 구간 + 내 길드만 · 이름 찾기 */
.tw-rk-tools { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-rk-tools:empty { display: none; }
.tw-rk-params { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-rk-sel { flex: 1 1 calc(var(--sp-6) * 6); min-width: 0; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2);
  min-height: calc(var(--sp-6) + var(--sp-3)); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--muted); }
.tw-rk-sel:focus-within { border-color: var(--fg-2); }
.tw-rk-sel select { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--fg-2); background: transparent;
  border: 0; padding: var(--sp-2) 0; }
.tw-rk-sel select:focus { outline: 0; }
.tw-rk-diffs { flex: 1 1 calc(var(--sp-6) * 6); }
.tw-rk-diffs > button { min-height: calc(var(--sp-6) + var(--sp-3)); padding: 0 var(--sp-2); font-size: var(--fs-sub); }
.tw-rk-flt { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding: var(--sp-1) 0; min-width: 0; }
.tw-rk-flt::-webkit-scrollbar { display: none; }
.tw-rk-flt > * { flex: none; }
.tw-rk-search { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); min-width: 0;
  min-height: calc(var(--sp-6) + var(--sp-3)); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--muted); }
.tw-rk-search:focus-within { border-color: var(--fg-2); }
.tw-rk-in { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs-body); line-height: var(--lh-tight); border: 0; background: none; color: var(--fg-2);
  padding: var(--sp-2) 0; align-self: stretch; }   /* 결정 CN(갈래 C 검토): 입력 누름 높이 = 검색 칸 전체(44) */
.tw-rk-in:focus { outline: 0; }
.tw-rk-in[aria-invalid="true"] { color: var(--bad); }
.tw-rk-qerr { font-size: var(--fs-sub); color: var(--bad); }
.tw-rk-pref { min-width: 0; }

/* 판 머리: 갱신 한 줄 · 검색 결과 · 내 순위(고정 카드) */
.tw-rk-body { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-rk-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-rk-meta__t { flex: 1 1 auto; min-width: 0; }
.tw-rk-found { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-rk-found__hit { min-height: calc(var(--sp-6) + var(--sp-3)); font-size: var(--fs-sub); }
.tw-rk-found__out { color: var(--fg); }
.tw-rk-mine { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-width: 0;
  padding: var(--sp-2) var(--sp-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-rk-mine__rank { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }
.tw-rk-mine__rank b { font-size: var(--fs-strong); line-height: var(--lh-tight); color: var(--fg-2); }
.tw-rk-mine__val { font-size: var(--fs-body); color: var(--fg); min-width: 0; overflow-wrap: anywhere; }
.tw-rk-mine__gap { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-rk-mine__go { gap: var(--sp-2); min-height: calc(var(--sp-6) + var(--sp-3)); padding: 0 var(--sp-3); font-size: var(--fs-sub); }
.tw-rk-mine.is-none b { font-size: var(--fs-body); }

/* 1~3위 시상대(가운데 1위가 가장 높음) */
.tw-rk-podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); align-items: end; min-width: 0; }
.tw-rk-pod { min-width: 0; }
.tw-rk-pod.is-p1 { order: 2; } .tw-rk-pod.is-p2 { order: 1; } .tw-rk-pod.is-p3 { order: 3; }
.tw-rk-pod__btn { width: 100%; font: inherit; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
  display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-1) var(--sp-3); min-width: 0; text-align: center; }
.tw-rk-pod.is-p1 .tw-rk-pod__btn { padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
.tw-rk-pod.is-r1 .tw-rk-pod__btn { border-color: var(--rank-1); }   /* 결정 CN·CR15: 1위만 금색 외곽선, 2·3위는 메달 글자 색만(옛 색 윗줄 3개 없음) */
.tw-rk-pod__medal { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sub); font-weight: var(--fw-strong); }
.tw-rk-pod.is-r1 .tw-rk-pod__medal { color: var(--rank-1); } .tw-rk-pod.is-r2 .tw-rk-pod__medal { color: var(--rank-2); }
.tw-rk-pod.is-r3 .tw-rk-pod__medal { color: var(--rank-3); }
.tw-rk-pod__name, .tw-rk-pod__sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-rk-pod__name { font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--fg-2); }
.tw-rk-pod__sub { font-size: var(--fs-cap); color: var(--muted); }
/* 값(지표)은 자르지 않는다 — 좁은 폭에서 '처치 n회 · 최소 n턴'의 턴이 말줄임에 가려지지 않게 줄을 바꾼다(검토 2026-09-29) */
.tw-rk-pod__val { max-width: 100%; font-size: var(--fs-sub); line-height: var(--lh-tight); color: var(--fg); overflow-wrap: anywhere; }

/* 아바타(승인 시작 아바타 — 얼굴 쪽으로 자름) · 길드 문장 */
.tw-rk-ava { flex: none; display: inline-grid; place-items: center; overflow: hidden; width: var(--sp-6); height: var(--sp-6);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); }
.tw-rk-ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.tw-rk-ava.is-lg { width: calc(var(--sp-6) * 1.5); height: calc(var(--sp-6) * 1.5); }
.tw-rk-ava.is-xl { width: calc(var(--sp-6) * 2); height: calc(var(--sp-6) * 2); }
.tw-rk-ava.is-emb { background: none; border: 0; }

/* 표(휴대폰 두 줄 카드 → ≥600 한 줄) + ≥840 오른쪽 요약 */
.tw-rk-split { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-rk-listwrap { display: grid; min-width: 0; }
.tw-rk-side { display: none; }
@media (min-width: 840px) {
  .tw-rk-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .tw-rk-side { display: block; position: sticky; top: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); padding: var(--sp-4); min-width: 0; }
}
.tw-rk-head { display: none; }
.tw-rk-list { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.tw-rk-row { display: grid; min-width: 0; border-bottom: 1px solid var(--rule); border-left: 2px solid transparent; }
/* 결정 CN2·CR15: 내 줄 = 이름 인디고 글자(옛 덧칠 바탕·색 세로선 없음), 찾은 줄 = 이름 주의색 글자, 고른 줄만 인디고 선 하나 */
.tw-rk-row.is-me .tw-rk-name { color: var(--me); }
.tw-rk-row.is-found .tw-rk-name { color: var(--warn); }
.tw-rk-row.is-sel { border-left-color: var(--sel); }
.tw-rk-row.is-out { margin-top: var(--sp-2); border-top: 1px solid var(--line); }
.tw-rk-gap { display: flex; justify-content: center; color: var(--faint); padding-top: var(--sp-1); }
.tw-rk-row__main { font: inherit; text-align: left; color: var(--fg); background: none; border: 0; cursor: pointer; width: 100%; min-width: 0;
  display: grid; grid-template-columns: calc(var(--sp-6) + var(--sp-2)) var(--sp-6) minmax(0, 1fr) auto;
  grid-template-areas: "no ava name val" "chg ava sub sub"; column-gap: var(--sp-2); row-gap: var(--sp-1); align-items: center;
  padding: var(--sp-2); min-height: calc(var(--sp-6) + var(--sp-3)); }
.tw-rk-row__main:hover .tw-rk-name, .tw-rk-pod__btn:hover .tw-rk-pod__name { color: var(--accent); }   /* 결정 CN2: 누를 곳 위 = 글자 색만 */
.tw-rk-no { grid-area: no; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); font-size: var(--fs-body); line-height: var(--lh-tight);
  font-weight: var(--fw-strong); color: var(--fg); font-variant-numeric: tabular-nums; }
.tw-rk-no.is-1 { color: var(--rank-1); } .tw-rk-no.is-2 { color: var(--rank-2); } .tw-rk-no.is-3 { color: var(--rank-3); }
.tw-rk-no .tw-li { font-size: var(--fs-sub); }
.tw-rk-chg { grid-area: chg; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-cap); line-height: var(--lh-tight); color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 0; }
.tw-rk-chg.is-up { color: var(--ok); } .tw-rk-chg.is-down { color: var(--bad); } .tw-rk-chg.is-same { color: var(--faint); }
.tw-rk-row__main > .tw-rk-ava { grid-area: ava; }
.tw-rk-name { grid-area: name; display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.tw-rk-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); line-height: var(--lh-tight);
  font-weight: var(--fw-strong); color: var(--fg-2); }
.tw-rk-name .tw-tag { flex: none; }
.tw-rk-sub { grid-area: sub; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); min-width: 0; font-size: var(--fs-cap); color: var(--muted); }
.tw-rk-job { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-cap); color: var(--muted); }
.tw-rk-gd { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; font-size: var(--fs-cap); color: var(--muted); }
.tw-rk-gd > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-rk-gd .tw-gname { font-weight: inherit; overflow-wrap: normal; }   /* 결정 BS② 2단계: 공용 길드 이름 칸(core.guildName)을 작은 꼬리표 굵기 그대로 */
.tw-rk-val { grid-area: val; justify-self: end; display: grid; justify-items: end; text-align: right; font-size: var(--fs-sub); line-height: var(--lh-tight);
  color: var(--fg-2); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.tw-rk-val small { font-size: var(--fs-cap); color: var(--muted); }
@media (min-width: 600px) {
  .tw-rk-row__main, .tw-rk-head { grid-template-columns: calc(var(--sp-6) + var(--sp-3)) calc(var(--sp-6) + var(--sp-2)) var(--sp-6) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "no chg ava name job gd val"; column-gap: var(--sp-2); }
  .tw-rk-sub { display: contents; }
  .tw-rk-job { grid-area: job; } .tw-rk-sub > .tw-rk-gd { grid-area: gd; }
  .tw-rk-head { display: grid; padding: 0 var(--sp-2) var(--sp-1); border-left: 2px solid transparent; border-bottom: 1px solid var(--line);
    font-size: var(--fs-cap); color: var(--muted); }
  .tw-rk-head__c.is-c0 { grid-area: no; text-align: center; } .tw-rk-head__c.is-c1 { grid-area: chg; text-align: center; } .tw-rk-head__c.is-c2 { grid-area: ava; }
  .tw-rk-head__c.is-c3 { grid-area: name; } .tw-rk-head__c.is-c4 { grid-area: job; } .tw-rk-head__c.is-c5 { grid-area: gd; } .tw-rk-head__c.is-c6 { grid-area: val; text-align: right; }
}
.tw-rk-foot { font-size: var(--fs-cap); color: var(--faint); padding-top: var(--sp-2); }

/* 요약(PC 오른쪽 판 · 휴대폰 줄 아래) */
.tw-rk-inline { padding: 0 var(--sp-3) var(--sp-3) var(--sp-5); }
.tw-rk-det { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-rk-det__top { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.tw-rk-det__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.tw-rk-det__who > b { flex-basis: 100%; font-size: var(--fs-strong); line-height: var(--lh-tight); color: var(--fg-2); overflow-wrap: anywhere; }
.tw-rk-det__job { font-size: var(--fs-sub); color: var(--muted); }

/* 명예 탭(결정 CA3) */
.tw-rk-hmeta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-rk-hmeta > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tw-rk-hsec { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-rk-h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-strong); line-height: var(--lh-tight);
  font-weight: var(--fw-strong); color: var(--fg-2); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--line); }
.tw-rk-h2__sub { font-size: var(--fs-cap); font-weight: var(--fw-regular); color: var(--muted); }
.tw-rk-hrs { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.tw-rk-hr { display: grid; grid-template-columns: var(--sp-5) minmax(0, 1fr); grid-template-areas: "ic what" "ic who" "ic meta";
  gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.tw-rk-hr.is-open .tw-rk-hr__what b { color: var(--muted); }
.tw-rk-hr__ic { grid-area: ic; color: var(--muted); font-size: var(--fs-strong); padding-top: var(--sp-1); }
.tw-rk-hr__what { grid-area: what; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); min-width: 0; }
.tw-rk-hr__what b { font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--fg-2); }
.tw-rk-hr__what small { font-size: var(--fs-sub); color: var(--muted); overflow-wrap: anywhere; }
.tw-rk-hr__who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.tw-rk-hr__tt { font-size: var(--fs-cap); color: var(--muted); }
.tw-rk-hr__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-cap); color: var(--muted); }
.tw-rk-hr__meta:empty { display: none; }
@media (min-width: 600px) {
  .tw-rk-hr { grid-template-columns: var(--sp-5) minmax(0, 1.2fr) minmax(0, 1fr) auto; grid-template-areas: "ic what who meta"; align-items: center; }
  .tw-rk-hr__ic { padding-top: 0; }
}
.tw-rk-hwho { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sub); color: var(--fg); }
.tw-rk-hwho b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-strong); }
.tw-rk-hwho small { font-size: var(--fs-cap); color: var(--muted); }
.tw-rk-hparty { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); min-width: 0; }
.tw-rk-sbs { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.tw-rk-sb { display: grid; gap: var(--sp-1); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.tw-rk-sb__name { font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--fg-2); overflow-wrap: anywhere; }
.tw-rk-sb__cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); min-width: 0; }
.tw-rk-cell { display: grid; padding: var(--sp-1) var(--sp-2); background: transparent; min-width: 0; }
.tw-rk-cell small { font-size: var(--fs-cap); color: var(--muted); }
.tw-rk-cell b { font-size: var(--fs-sub); line-height: var(--lh-tight); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-rk-cell__who { font-size: var(--fs-cap); color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-rk-cell.is-empty .tw-rk-cell__who { color: var(--faint); }
@media (min-width: 600px) { .tw-rk-sb { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; } }
.tw-rk-past { border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; min-width: 0; }
.tw-rk-past > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--sp-6) + var(--sp-3)); padding: 0 var(--sp-3); cursor: pointer;
  font-size: var(--fs-sub); color: var(--fg); }
.tw-rk-past > .tw-rk-hrs { padding: 0 var(--sp-3) var(--sp-2); }

/* 보스 화면 머리 한 줄(결정 CA3 — 최소 연결) */
.tw-rk-bl { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: 0 0 0 var(--sp-3); font-size: var(--fs-sub);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; }
.tw-rk-bl[hidden] { display: none; }
.tw-rk-bl__ic { flex: none; display: inline-grid; color: var(--rank-1); }
.tw-rk-bl__t { flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: var(--lh-tight);
  color: var(--fg); }