/* ============================================================
   📊 스타티어 한 장 전용 (star-tier.css)
   ------------------------------------------------------------
   2026-09-10 — "들어오자마자 티어 → 선수" 가 보이게.

   ⚠️ 이 파일은 /게임/스타크래프트/스타티어/ **한 장에서만** 불러옵니다.
      모든 규칙을 body[data-tier-page] 로 묶어 두었으니,
      다른 페이지에 이 파일을 링크하지 않는 한 절대 새지 않습니다.

   왜 새 파일인가 (건드리면 안 되는 것들)
     · 게임/game-ui.css     → 16개 페이지가 함께 씁니다 (.gu-wrap 폭)
     · _star/star.css       → 스타 · 스타티어 · 대학현황판 3장 공용
     · _star/star-boards.css→ 스타티어 · 대학현황판 2장 공용
   그래서 위 셋은 한 줄도 고치지 않고, 여기서 이 페이지만 덮어씁니다.

   고친 것 (2026-09-10 실측 기준)
     본문 폭   1080px → 1560px   (.gu-wrap 은 넓히고, 상단 3줄만 1080 유지)
     필터 높이 445px  → 목표 200px 선
     첫 카드   784px  → 목표 500px 선   (1440×900 에서 두 줄이 보이게)
     카드      201px  → 약 214px(7열) · 사진 44→54 · 이름 15.5→17
   ============================================================ */

/* ══ ① 본문만 넓히기 ═══════════════════════════════════════
   .gu-wrap 은 1080px 로 묶여 있고, 그 안의 .wrap 은 이미 1560px 을
   쓸 준비가 돼 있는데 부모에 갇혀 있었습니다(실측: 1920 화면에서
   좌우 420px 씩 빈 공간). 부모를 풀고, 대신 상단 세 줄만 1080 으로
   가운데 정렬해서 사이트 전체 정렬이 안 깨지게 합니다. */
body[data-tier-page] .gu-wrap{
  max-width:min(1560px, calc(100vw - 48px));
}
/* 상단(빵부스러기 · 갈래탭 · 제목)은 예전 폭 그대로 */
body[data-tier-page] .gu-crumb,
body[data-tier-page] .sc-bar,
body[data-tier-page] .gu-tabs,
body[data-tier-page] .sc-hero{
  max-width:1080px; margin-left:auto; margin-right:auto;
}
body[data-tier-page] .wrap{ max-width:none; margin:0; }

/* ══ ② 제목줄 — "스타티어   316명 · LIVE 48   ↻" ══════════ */
body[data-tier-page] .st-hero{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px;
}
body[data-tier-page] .st-hero h1{ flex:0 0 auto; }
.st-sum{
  display:flex; align-items:baseline; gap:5px; flex:0 0 auto;
  white-space:nowrap;
}
.st-sum b{
  font-family:'Jua',sans-serif; font-weight:400; font-size:22px; line-height:1;
  color:var(--lav-ink);
}
.st-sum .ft-unit{ font-size:13px; font-weight:700; color:var(--ink-2); }
/* "지금 N명 방송 중" — 제목 옆이라 한 줄로 붙입니다 (필터바에 있을 때와 다른 모양) */
body[data-tier-page] .st-sum .fb-tnote{
  display:inline; flex:0 0 auto; margin:0 0 0 8px;
  font-size:12.5px; font-weight:700; color:var(--ink-3);
}
body[data-tier-page] .st-sum .fb-tnote.on{ color:#f26d97; }
body[data-tier-page] .st-hero .stamp{ margin-left:auto; }

/* ══ ③ 검색 — 이 페이지의 첫 조작. 조금 낮게 ═══════════════ */
body[data-tier-page] .searchbar{ padding:9px 14px; margin-bottom:9px; }
body[data-tier-page] #st-search{ font-size:15px; }

/* ══ ④ 보조 필터 한 줄 ════════════════════════════════════
   위계: 전체·LIVE(강조) > 종족(조용한 칩) > 대학·세부(기능 단추)
   모두 같은 크기로 빛나면 다시 정신없어집니다. */
body[data-tier-page] .fbar{ padding:9px 12px !important; gap:8px !important; }
body[data-tier-page] .fb-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; width:100%;
}

/* ④-1 전체 / LIVE — 조금 강조 */
body[data-tier-page] .qn-filter .qf-btn{
  font-size:13px; padding:7px 13px; gap:6px;
}
body[data-tier-page] .qn-filter .qf-n{ font-size:11.5px; padding:1px 6px; }

/* ④-2 종족 — 작은 칩. 고른 것만 포인트 컬러, 나머지는 조용하게 */
body[data-tier-page] .qn-race{ gap:5px; }
body[data-tier-page] .qr-btn{
  font-size:12.5px; padding:6px 11px; gap:5px;
  background:transparent; border-color:var(--line);
  color:var(--ink-3); box-shadow:none;
}
body[data-tier-page] .qr-btn:hover{ color:var(--ink-2); border-color:var(--line-2); }
body[data-tier-page] .qr-btn .qr-n{ font-size:11px; padding:1px 6px; }
/* 종족은 핑크 계열로 — 바로 옆 '전체/LIVE'(보라)와 색이 같으면
   [전체][LIVE][전체] 가 나란히 붙어서 어느 게 어느 필터인지 헷갈립니다. */
body[data-tier-page] .qr-btn[aria-pressed="true"]{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#ff5f9e,#ff9ec4);
  box-shadow:0 4px 11px rgba(255,95,158,.22);
}
/* '전체' 는 아무것도 안 고른 기본값이라 조용하게 (고른 티가 나면 안 됨) */
body[data-tier-page] .qr-btn.all[aria-pressed="true"]{
  color:var(--ink-2); background:var(--bg-2);
  border-color:var(--line-2); box-shadow:none;
}
body[data-tier-page] .qr-btn.all[aria-pressed="true"] .qr-n{
  background:rgba(0,0,0,.06); color:var(--ink-3);
}

/* 방송상태 ↔ 종족 사이 옅은 구분선 */
body[data-tier-page] .qn-race{
  padding-left:14px; border-left:1.5px solid var(--line);
}

/* ④-3 대학 · 세부 — 기능 단추. 오른쪽 끝에 조용히 */
.st-tools{ display:flex; align-items:center; gap:7px; margin-left:auto; flex:0 0 auto; }
body[data-tier-page] .st-tools .fb-fold{
  width:auto; margin:0; padding:0; border-top:0; position:relative;
}
/* 기능 단추지만 '있는 줄은 알아볼 수 있게' — 너무 흐리면 처음 온 사람이 못 찾습니다 */
body[data-tier-page] .st-tools .fb-foldbtn{
  font-size:13px; padding:7px 13px; gap:5px;
  background:var(--surface); border-color:var(--line-2); color:var(--ink-2);
}
body[data-tier-page] .st-tools .fb-foldbtn:hover{ color:var(--lav-ink); border-color:var(--lav); }
body[data-tier-page] .st-tools .fb-fold.open .fb-foldbtn{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#6b5bd6,#8f7ce8);
}
body[data-tier-page] .st-tools .ff-ar{ font-size:9px; transition:transform .16s; }
body[data-tier-page] .st-tools .fb-fold.open .ff-ar{ transform:rotate(180deg); }

/* 펼치면 단추 아래로 떠오릅니다 — 줄 높이를 늘리지 않게 (레이아웃 안 밀림) */
body[data-tier-page] .st-tools .chips,
body[data-tier-page] .st-tools .univinfo,
body[data-tier-page] .st-tools .st-more-in{ display:none !important; }
body[data-tier-page] .st-tools .fb-fold.open .chips{
  display:grid !important;
  position:absolute; top:calc(100% + 7px); right:0; z-index:70;
  width:min(560px, calc(100vw - 40px));
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr)) !important;
  gap:6px; margin:0; padding:12px;
  border-radius:16px; background:var(--surface);
  border:1.5px solid var(--line);
  box-shadow:0 16px 38px rgba(214,138,164,.22);
}
body[data-tier-page] .st-tools .fb-fold.open .univinfo{
  display:flex !important;
  position:absolute; top:calc(100% + 7px); right:0; z-index:69;
  transform:translateY(100%); margin-top:6px;
  white-space:nowrap;
}
body[data-tier-page] .st-tools .fb-fold.open .st-more-in{
  display:flex !important; gap:6px;
  position:absolute; top:calc(100% + 7px); right:0; z-index:70;
  padding:10px; border-radius:14px;
  background:var(--surface); border:1.5px solid var(--line);
  box-shadow:0 16px 38px rgba(214,138,164,.22);
}
body[data-tier-page] .st-more-in .qf-btn{ font-size:12.5px; padding:6px 12px; white-space:nowrap; }
body[data-tier-page] .st-tools .chips .chip{ font-size:12.5px; padding:7px 10px; }

/* ══ ⑤ 티어 바로가기 = 이 페이지의 목차 ═══════════════════
   ⚠️ 필터가 아니라 '그 티어 구간으로 이동' 입니다 (주인님 확정 2026-09-10).
   PC 는 두 줄 안에 16개가 다 보이게. */
body[data-tier-page] .fb-tiers{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr)) !important;
  gap:5px !important; margin-top:2px;
}
body[data-tier-page] .fb-tiers .qn-item{
  font-size:12.5px !important; padding:6px 10px !important; gap:6px;
}
body[data-tier-page] .fb-tiers .qn-item .dot{ width:8px; height:8px; }
body[data-tier-page] .fb-tiers .qn-item .cnt2{ font-size:11.5px; }
body[data-tier-page] .fb-tiers .qn-top{ font-size:12px !important; padding:6px 10px !important; }

/* ══ ⑥ 티어 구간 제목 — "갓 / 24명 · LIVE 3" ═══════════════ */
body[data-tier-page] .trow{ padding:14px 16px; margin-bottom:11px; }
body[data-tier-page] .tlabel{ margin-bottom:11px; }
body[data-tier-page] .tlabel .tl-nm{ font-size:21px; }
body[data-tier-page] .tlabel .cnt{ font-size:12.5px; }

/* ══ ⑦ 선수 카드 — 넓어진 만큼 키웁니다 ═══════════════════
   minmax(200px) + gap 10px 로 화면 폭에 따라 열 수가 저절로 바뀝니다.
     1920 화면(본문 1560) → 7열     1440(1392) → 6열
     1280(1232)          → 5열      1024(976)  → 4열
   카드 안의 내용(사진·LIVE·닉네임·종족·소속·홈 단추)은 그대로입니다.
   보이는 차례만 사진·이름·LIVE 가 먼저 오도록 크기로 정리했습니다. */
body[data-tier-page] .tmembers,
body[data-tier-page] .plist{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;
  gap:10px !important;
}
body[data-tier-page] .pcard{ padding:12px; gap:11px; border-radius:16px; }
body[data-tier-page] .pthumb{ width:54px; height:54px; flex:0 0 54px; font-size:23px; }
body[data-tier-page] .pname{ font-size:17px; margin-top:5px; }
/* 소속 한 줄("캄몬스타즈 · 교수" 처럼 긴 것)이 두 줄로 접히면 카드 키가 21px 씩
   들쭉날쭉해집니다(실측 2026-09-10: 316장 중 30장). 한 줄로 두고 넘치면 … 로.
   글자는 안 지웁니다 — 마우스를 올리면 title 로 전체가 보입니다. */
body[data-tier-page] .pmeta{
  font-size:12.5px; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body[data-tier-page] .pview{ font-size:12px; }
body[data-tier-page] .pbadge{ font-size:11px; padding:2px 9px; }
/* 카드 아래 한 줄 안내("방송 중이 아니에요" 등)는 한 줄로 자릅니다.
   좁은 카드에서 세 줄로 늘어져 카드 높이가 20px 씩 들쭉날쭉했습니다(실측).
   글은 지우지 않았습니다 — 넘치면 … 로 줄이기만 합니다. */
body[data-tier-page] .ptitle{
  font-size:12px; margin-top:3px;
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  -webkit-line-clamp:none;
}

/* ⑦-2 LIVE 는 확실하게, OFF 는 읽히게 ─────────────────────
   번쩍이는 애니메이션은 쓰지 않습니다. 테두리와 아주 옅은 바탕만.
   OFF 카드도 닉네임은 또렷하게 남깁니다(예전엔 흐려서 이름 찾기가 힘들었어요). */
body[data-tier-page] .pcard.live{
  border-color:#ffa9c6; background:#fffafc;
  box-shadow:0 6px 18px rgba(255,61,113,.13);
}
body[data-tier-page] .pcard.off{ background:var(--surface); border-color:var(--line); }
body[data-tier-page] .pcard.off .pname{ color:var(--ink-2); }        /* 이름은 또렷하게 */
body[data-tier-page] .pcard.off .pthumb img{ filter:grayscale(.85); opacity:.72; }
/* 홈(방송국) 단추는 부가 기능 — 시선을 덜 가져가게 */
body[data-tier-page] .pgo{ opacity:.55; transition:opacity .14s; }
body[data-tier-page] .pcard:hover .pgo,
body[data-tier-page] .pgo:focus-visible{ opacity:1; }

/* ══ ⑧ 폰 (≤900px) — PC 를 줄인 게 아니라 따로 짭니다 ══════
   실측(2026-09-10, 375×812): 첫 선수 카드가 838px 에 있어서
   "스타티어인데 스타가 안 보이는" 상태였습니다.
   가장 큰 원인은 티어 바로가기가 2열 그리드로 395px 을 먹은 것. */
@media (max-width:900px){
  body[data-tier-page] .gu-wrap{ max-width:none; }

  /* ⑧-1 티어 목차 → 가로 스크롤 한 줄 (395px → 약 45px)
     ⚠️ 먼저 옛 '하단 시트' 잔재를 풀어야 합니다.
        star.css(767px 이하)에 `.qn-list{ position:fixed; bottom:64px;
        transform:translateY(112%) }` 가 남아 있습니다 — 예전에 화면 아래에서
        올라오던 티어 시트 시절 규칙입니다. 지금은 필터바 안에 줄로 놓기 때문에
        이걸 안 풀면 목차가 붕 떠서 위 필터줄과 겹칩니다(실측 2026-09-10).
        star.css 는 3페이지 공용이라 못 고치고, 여기서 이 페이지만 되돌립니다. */
  body[data-tier-page] .fb-tiers{
    position:static !important; transform:none !important;
    left:auto !important; right:auto !important; bottom:auto !important;
    max-height:none !important; box-shadow:none !important;
    border-top:0 !important; border-radius:0 !important;
    background:transparent !important; padding:0 0 2px !important;
    transition:none !important;
    display:flex !important; flex-wrap:nowrap !important;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    scroll-padding-inline:40px;              /* 고른 칩이 가장자리에 딱 붙지 않게 */
    gap:6px !important; padding-bottom:2px;
  }
  body[data-tier-page] .fb-tiers::-webkit-scrollbar{ display:none; }
  body[data-tier-page] .fb-tiers .qn-item,
  body[data-tier-page] .fb-tiers .qn-top{
    flex:0 0 auto !important; width:auto !important;
    font-size:13px !important; padding:7px 12px !important;
  }
  body[data-tier-page] .fb-tiers .qn-item .cnt2{ margin-left:2px !important; }

  /* ⑧-2 제목줄 — 한 줄로 */
  body[data-tier-page] .st-hero h1{ font-size:26px !important; }
  body[data-tier-page] .st-hero .stamp{ width:auto; margin-left:auto; }

  /* ⑧-3 보조 필터 — 티어 목차와 같은 '한 줄 가로 스크롤'
     세로로 쌓으면 세 줄 127px 을 먹습니다(실측). 옆으로 밀면 약 40px.
     조작 방식이 바로 아래 티어 목차와 같아서 헷갈리지도 않습니다. */
  body[data-tier-page] .fb-row{
    flex-wrap:nowrap; gap:7px;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  body[data-tier-page] .fb-row::-webkit-scrollbar{ display:none; }
  body[data-tier-page] .fb-row > *{ flex:0 0 auto; }
  body[data-tier-page] .qn-filter,
  body[data-tier-page] .qn-race{ flex-wrap:nowrap; }
  body[data-tier-page] .qn-filter .qf-btn{ font-size:12.5px; padding:6px 11px; white-space:nowrap; }
  body[data-tier-page] .qr-btn{ font-size:12px; padding:5px 9px; white-space:nowrap; }
  body[data-tier-page] .qn-race{ padding-left:9px; }
  body[data-tier-page] .st-tools{ margin-left:0; padding-left:9px; border-left:1.5px solid var(--line); }
  body[data-tier-page] .st-tools .fb-foldbtn{ font-size:12px; padding:5px 10px; white-space:nowrap; }

  /* 펼침창은 '필터바(.fbar)' 기준으로 놓습니다.
     ⚠️ 단추가 든 .fb-row 는 가로로 스크롤되므로, 그 안을 기준으로 잡으면
        옆으로 밀 때 펼침창이 같이 딸려가 화면 밖으로 나갑니다.
        .fb-fold 의 기준점을 풀고(static) 스크롤하지 않는 .fbar 를 기준으로 삼습니다. */
  body[data-tier-page] .fbar{ position:relative; }
  body[data-tier-page] .st-tools .fb-fold{ position:static; }
  body[data-tier-page] .st-tools .fb-fold.open .chips,
  body[data-tier-page] .st-tools .fb-fold.open .st-more-in{
    left:10px; right:10px; width:auto; top:calc(100% + 6px); z-index:75;
  }
  body[data-tier-page] .st-tools .fb-fold.open .chips{
    grid-template-columns:repeat(auto-fill,minmax(92px,1fr)) !important;
    max-height:46vh; overflow-y:auto;
  }
  body[data-tier-page] .st-tools .fb-fold.open .univinfo{ display:none !important; }

  /* ⑧-4 선수 카드 2열 — 폰에서도 한눈에 훑을 수 있게 */
  body[data-tier-page] .tmembers,
  body[data-tier-page] .plist{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important;
  }
  body[data-tier-page] .pcard{ padding:10px; gap:8px; }
  body[data-tier-page] .pthumb{ width:42px; height:42px; flex:0 0 42px; font-size:19px; }
  body[data-tier-page] .pname{ font-size:14.5px; }
  body[data-tier-page] .pmeta{ font-size:11px; }
  body[data-tier-page] .trow{ padding:12px 12px; }
  body[data-tier-page] .tlabel .tl-nm{ font-size:18px; }
}

/* 아주 좁은 폰에서는 2열이 답답해지므로 카드 안을 세로로 */
@media (max-width:400px){
  body[data-tier-page] .pcard{ flex-direction:column; align-items:flex-start; gap:6px; }
  body[data-tier-page] .pgo{ position:absolute; top:8px; right:8px; }
  body[data-tier-page] .pcard{ position:relative; }
}

/* 가로로 삐져나가지 않게 */
body[data-tier-page] .fbar,
body[data-tier-page] .fb-row,
body[data-tier-page] .st-tools{ max-width:100%; min-width:0; }
body[data-tier-page] .pcard{ min-width:0; }
body[data-tier-page] .pbody{ min-width:0; }