/* ============================================================
   📊 스타티어 · 🏫 대학현황판 전용 모양 (star-boards.css)
   ------------------------------------------------------------
   2026-09-09 — "한눈에 보이게" 개편.

   ⚠️ 이 파일은 두 페이지에서만 불러옵니다.
        /게임/스타크래프트/스타티어/
        /게임/스타크래프트/대학현황판/
      스타(개인전적) 페이지는 이 파일을 안 부르므로 예전 모습 그대로입니다.
      공용 star.css 를 고치지 않은 이유가 바로 이것입니다.

   색은 star.css 와 같은 결을 씁니다(흰 카드 + 연분홍 테두리).
   star.css 의 선수 카드·티어 줄이 다크모드에서도 흰색이라, 여기서만
   어둡게 만들면 한 화면에 두 가지 색이 섞여서 그대로 맞췄습니다.
   ============================================================ */

/* ══ ① 맨 위 요약 — "총 317명" ══════════════════════════ */
.fb-total{
  display:flex; align-items:baseline; gap:5px;
  flex:0 0 auto; margin-right:2px; padding-right:12px;
  border-right:1.5px solid var(--line-2);
  /* ⚠️ flex-wrap 과 nowrap 이 둘 다 필요합니다.
       · flex-wrap:wrap  — 아래 한 줄 안내(.fb-tnote)가 width:100% 라서,
                           안 감싸면 형제들을 옆으로 짓눌러 "대 학 14 곳" 처럼
                           글자가 세로로 쪼개집니다 (2026-09-09 실제로 그랬음).
       · white-space:nowrap — 좁은 화면에서도 낱글자로 안 쪼개지게. */
  flex-wrap:wrap; white-space:nowrap;
}
.fb-total > *{ flex:0 0 auto; }
.fb-total .ft-lb{ font-size:12px; font-weight:700; color:var(--ink-3); }
.fb-total b{
  font-family:'Jua',sans-serif; font-weight:400; font-size:26px; line-height:1;
  color:var(--lav-ink);
}
.fb-total .ft-unit{ font-size:13px; font-weight:700; color:var(--ink-2); }
.fb-tnote{
  display:block; flex:0 0 100%; margin-top:3px;
  font-size:11.5px; font-weight:700; color:var(--ink-3);
}
.fb-tnote.on{ color:#f26d97; }

@media (max-width:640px){
  .fb-total{ border-right:0; padding-right:0; width:100%; }
  .fb-total b{ font-size:22px; }
}

/* ══ ①-2 '확인 불가' 단추 ═══════════════════════════════
   LIVE 도 OFF 도 아닌 사람 — 아이디가 없거나 SOOP 응답을 못 받은 경우.
   카드에 이미 쓰는 '확인 불가'(#fdeecb / #b07d11) 와 같은 색으로 맞췄습니다.
   ⚠️ 이 단추가 없던 시절에는 그 사람들이 LIVE·OFF 양쪽에 겹쳐 세어졌습니다. */
.qf-btn.unknown .qf-dot{ border-color:#c9a227; }
.qf-btn.unknown[aria-pressed="true"]{
  background:linear-gradient(135deg,#d9a520,#e8c05a);
  box-shadow:0 6px 14px rgba(176,125,17,.3);
}
.qf-btn.unknown[aria-pressed="true"] .qf-dot{ border-color:#fff; background:#fff; }
.qf-btn[hidden]{ display:none !important; }

/* ══ ② 접었다 펴는 필터 줄 (대학 고르기 · 티어 고르기) ══════
   처음엔 접혀 있습니다. 세 줄이 한꺼번에 펼쳐지면 화면을 다 먹어서요. */
.fb-fold{
  width:100%; margin-top:9px; padding-top:9px;
  border-top:1.5px solid var(--line);
}
.fb-fold[hidden]{ display:none !important; }

.fb-foldbtn{
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px;
  color:var(--ink-2); background:var(--bg-2);
  border:1.5px solid var(--line-2); transition:.14s;
}
.fb-foldbtn:hover{ color:var(--ink); border-color:var(--lav); }
.fb-foldbtn:focus-visible{ outline:3px solid var(--lav); outline-offset:2px; }
.fb-foldbtn b{ color:var(--lav-ink); }
.fb-foldbtn .ff-ar{ font-size:10px; transition:transform .16s; }
.fb-fold.open .fb-foldbtn .ff-ar{ transform:rotate(90deg); }
.fb-fold.open .fb-foldbtn{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#6b5bd6,#8f7ce8); }
.fb-fold.open .fb-foldbtn b{ color:#fff; }

/* 접힌 동안은 칩을 감춥니다 (star.js 의 hidden 처리와 별개)
   ⚠️ !important 를 쓴 이유 — star.css 에 `.chips{ display:grid !important }` 가
      이미 있습니다(가로로 길어지지 않게 격자로 깔아둔 것). important 끼리는
      나중에 온 규칙이 이기므로, 이 파일이 star.css 뒤에 실려야 합니다.
      두 페이지 모두 star.css 다음에 이 파일을 넣어 뒀습니다. */
.fb-fold .chips,
.fb-fold .univinfo,
.fb-fold .tchips{ display:none !important; }
.fb-fold.open .chips{ display:grid !important; margin:10px 0 0; }
.fb-fold.open .univinfo{ display:flex !important; }
.fb-fold.open .tchips{ display:flex !important; flex-wrap:wrap; gap:7px; margin:10px 0 0; }

/* headfix 안의 .chips 는 원래 위쪽 구분선을 갖고 있는데,
   이제 .fb-fold 가 그 선을 그리므로 겹치지 않게 지웁니다. */
.headfix .fb-fold .chips{ margin-top:10px; padding-top:0; border-top:0; }

/* 스크롤을 내려 머리띠가 얇아지면(hf-slim) 접이줄은 잠시 숨깁니다 */
body.hf-slim .headfix .fb-fold{ display:none; }

/* ══ ③ 티어 고르기 칩 (대학현황판) ═══════════════════════ */
.tchips{ width:100%; }
.tchip{
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px;
  color:var(--ink-2); background:var(--surface);
  border:1.5px solid var(--line-2); transition:.14s;
}
.tchip:hover{ border-color:var(--tc,#a78bfa); color:var(--ink); }
.tchip:focus-visible{ outline:3px solid var(--lav); outline-offset:2px; }
.tchip .tc-dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--tc,#a78bfa);
}
.tchip .tc-n{
  font-size:11.5px; font-weight:800; color:var(--ink-3);
  background:var(--bg-2); border-radius:999px; padding:1px 7px;
}
.tchip.on{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#6b5bd6,#8f7ce8); }
.tchip.on .tc-dot{ background:#fff; }
.tchip.on .tc-n{ background:rgba(255,255,255,.26); color:#fff; }

/* ══ ④ 티어표 본문 — 더 촘촘하게 ══════════════════════════
   한 화면에 더 많이 들어오게 카드와 줄 간격만 줄였습니다.
   카드 안에 무엇이 보이는지(사진·종족·이름·티어·소속)는 그대로입니다. */
.trow{ padding:13px 15px; margin-bottom:10px; }
.tlabel{ margin-bottom:10px; align-items:center; }
.tlabel .tl-nm{ font-size:18px; }
.tlabel .cnt{ font-size:11.5px; }
.tmembers{ grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:9px; }
.plist{ grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:9px; }

.pcard{ padding:10px; gap:10px; border-radius:15px; }
.pthumb{ width:44px; height:44px; flex:0 0 44px; font-size:19px; }
.pname{ font-size:15.5px; margin-top:4px; }
.pmeta{ font-size:11.5px; }
.pview{ font-size:11.5px; }
.pcard:hover{ transform:translateY(-3px); }

/* ══ ⑤ 눌러서 오갈 수 있는 조각 ═══════════════════════════
     티어표 카드의 '소속 대학'  → 대학현황판
     대학 상세 카드의 '티어 배지' → 티어표
   글자색·크기는 그대로 두고, 마우스를 올렸을 때만 눌리는 곳임을 알립니다. */
.pmeta .pu{ cursor:pointer; border-bottom:1px dashed transparent; }
.pmeta .pu:hover{ color:var(--lav-ink); border-bottom-color:currentColor; }
.pmeta .pu:focus-visible{ outline:2px solid var(--lav); outline-offset:2px; border-radius:3px; }
.ptier[data-tier]{ cursor:pointer; }
.ptier[data-tier]:hover{ opacity:1; box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 25%,transparent); }
.ptier[data-tier]:focus-visible{ outline:2px solid var(--lav); outline-offset:2px; }

/* ══ ⑥ 🏫 대학 카드 ══════════════════════════════════════
   ⚠️ 대학 마크 그림 파일이 아직 없습니다. 그래서 왼쪽 색 띠(--uc)와
      대학 이름으로만 구분합니다. 색은 star-data.js 의 UNIV_MARK.c 입니다.
      임시 그림을 지어내지 않습니다. */
.ubgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:12px; align-items:start;
}

.ub-card{
  background:#fff; border-radius:18px; overflow:hidden;
  border:2px solid #f6eef2; box-shadow:0 6px 18px rgba(124,77,219,.09);
  transition:box-shadow .16s, border-color .16s;
  scroll-margin-top:130px;
}
.ub-card:hover{ border-color:#ead9e4; box-shadow:0 10px 24px rgba(124,77,219,.16); }
/* 펼친 카드는 한 줄을 다 씁니다 — 선수 카드가 넉넉히 들어가게 */
.ub-card.open{ grid-column:1 / -1; border-color:var(--uc); }

.ub-head{
  width:100%; font-family:inherit; text-align:left; cursor:pointer;
  display:grid; gap:3px 10px; align-items:center;
  grid-template-columns:6px 1fr auto;
  grid-template-areas:
    "bar main races"
    "bar mem  mem"
    "bar live go";
  padding:0; border:0; background:none;
  padding:13px 15px 13px 0;
}
.ub-head:focus-visible{ outline:3px solid var(--lav); outline-offset:-3px; }

.ub-bar{ grid-area:bar; align-self:stretch; background:var(--uc);
  border-radius:0 4px 4px 0; min-height:56px; }

.ub-main{ grid-area:main; display:flex; align-items:baseline; gap:8px; min-width:0; }
.ub-nm{ font-family:'Jua',sans-serif; font-size:19px; color:#4a3a44;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ub-n{ font-size:13px; font-weight:800; color:var(--uc); flex:0 0 auto; }

.ub-races{ grid-area:races; display:flex; gap:5px; flex:0 0 auto; }
.ub-r{ font-style:normal; font-size:11px; font-weight:700; color:#fff;
  border-radius:6px; padding:2px 7px; opacity:.92; }
.ub-r b{ font-weight:800; }
.ub-r.P{ background:#d98908; }      /* star-data.js RACES 와 같은 색 */
.ub-r.T{ background:#2f7dc0; }
.ub-r.Z{ background:#7c4ddb; }

.ub-mem{ grid-area:mem; font-size:12px; color:#8d8189; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ub-live{ grid-area:live; font-size:12px; font-weight:800; color:#f26d97;
  display:inline-flex; align-items:center; gap:5px; margin-top:3px; }
.ub-live .dot{ background:#f26d97; }
.ub-live.off{ color:#b0a8ad; font-weight:600; }

.ub-go{ grid-area:go; justify-self:end; margin-top:3px;
  font-size:12px; font-weight:700; color:var(--lav-ink);
  display:inline-flex; align-items:center; gap:4px; }
.ub-go i{ font-style:normal; font-size:10px; transition:transform .16s; }
.ub-card.open .ub-go i{ transform:rotate(180deg); }

.ub-body{ padding:0 15px 15px; }
.ub-body[hidden]{ display:none; }
.ub-sum{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px;
  padding:11px 0 13px; margin-bottom:12px;
  border-top:1.5px dashed #f0e4ec; border-bottom:1.5px dashed #f0e4ec;
  font-size:14px; color:#6b5c65;
}
.ub-sum b{ font-family:'Jua',sans-serif; font-weight:400; font-size:17px; color:#4a3a44; }
.ub-sum-r{ font-size:12.5px; color:#8d8189; }

@media (max-width:640px){
  .ubgrid{ grid-template-columns:1fr; gap:10px; }
  .ub-head{ grid-template-columns:6px 1fr;
    grid-template-areas:
      "bar main"
      "bar races"
      "bar mem"
      "bar live"
      "bar go"; }
  .ub-go{ justify-self:start; }
  .ub-nm{ font-size:17.5px; }
  .tmembers, .plist{ grid-template-columns:1fr; }
}

/* 아주 좁은 화면에서 가로로 삐져나가지 않게 */
.ubgrid, .ub-card, .ub-head, .ub-body{ max-width:100%; min-width:0; }
.ub-head > *{ min-width:0; }