/* ─────────────────────────────────────────────────────────────────────────
   랭킹 — Ranking.dc.html 이식.

   ★ 시안 helmet CSS 그대로다. 전역 규칙(html/body/a/스크롤바)만 뺀다 —
     shell.css 가 이미 갖고 있고, 두 번 쓰면 갈라진다.
   ★ 본문 폭 상한·격자·문서 스크롤은 이 파일이 갖는다 — 화면마다 다르다.
   ───────────────────────────────────────────────────────────────────────── */

[data-r=grid]{display:grid;height:100%;grid-template-columns:var(--rail,212px) minmax(0,1fr);grid-template-rows:56px minmax(0,1fr);grid-template-areas:"rail head" "rail main"}

[data-r=grid]{grid-template-columns:var(--rail,212px) minmax(0,1fr) minmax(0,1280px) minmax(0,1fr);grid-template-areas:"head head head head" "rail . main ."}

[data-r=grid]{--hh:56px}

[data-r=main]{grid-area:main;display:flex;flex-direction:column;min-height:0;overflow:hidden}

[data-r=top]{display:grid;grid-template-columns:560px minmax(0,1fr);flex:none}

[data-r=hall]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

[data-r=mybody]{display:grid}

[data-r=rank]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

[data-r=rankscroll]{flex:1 1 auto;min-height:0;overflow-y:auto}

/* 순위표 열 — 시안 §19.28: 순위 · 이름 · 픽 성향 · 적중률 · 표본 · 최고 연승 · 무승부 적중 · 등급 · 변동 */
[data-r=trow]{grid-template-columns:56px minmax(110px,1fr) minmax(0,230px) 84px 84px 72px 104px 60px 60px}

[data-r=msamp],[data-r=myx],[data-r=tabbar]{display:none}

@media (max-width:1180px){[data-r=top]{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}[data-r=trow]{grid-template-columns:44px minmax(90px,1fr) 76px 76px 60px 92px 50px 48px}[data-r=trow]>[data-lean]{display:none!important}}

/* 모바일 — 픽 성향 · 추종 칩 숨김(§19.28) */
@media (max-width:760px){[data-r=trow]>[data-lean],[data-r=fchip]{display:none!important}}

/* 순위표 이름 = 버튼 — hover 파랑(시안 §19.30 style-hover) */
[data-a=pick]:hover{color:#8fb3ff!important}

[data-r=rankscroll]{overflow-x:hidden}

@media (max-width:760px){
[data-r=grid]{display:flex;flex-direction:column;overflow-y:auto;padding-bottom:78px}
[data-r=grid]>*{flex-shrink:0}
[data-r=rail],[data-r=dcol]{display:none}
[data-r=main],[data-r=top]{display:contents}
[data-r=head]{order:0;height:64px}
[data-r=period]{order:1;position:sticky;top:0;z-index:5}
[data-r=hallwrap]{order:2;border-right:none!important}
[data-r=hall]{display:flex;overflow-x:auto;scrollbar-width:none}
[data-r=hall]>*{flex:0 0 72%}
[data-r=mine]{order:3}
[data-r=myx]{display:flex}
[data-my=closed] [data-r=mybody]{display:none}
[data-r=rank]{order:4;flex:none}
[data-r=rankscroll]{overflow:visible}
[data-r=trow]{grid-template-columns:36px minmax(0,1fr) 92px 44px;padding:0 12px!important}
[data-r=msamp]{display:block}
[data-r=tabbar]{display:flex}
[data-r=hidem]{display:none}
}

@media (max-width:760px){[data-r=htog]{display:none!important}}

[data-shell=page]{height:auto!important;min-height:100vh;overflow:visible!important}

[data-r=grid]{height:auto!important;min-height:100vh}

[data-r=main]{overflow:visible!important;min-height:0!important}

[data-r=main] [style*="overflow-y: auto"],[data-r=main] [style*="overflow: auto"]{overflow-y:hidden!important;max-height:none!important}

@media (min-width:761px){
[data-r=main]{display:flex;flex-direction:column}
[data-r=main]{padding:16px;gap:12px}
[data-r=main] [style*="background: rgb(15, 17, 19)"],[data-r=main] [style*="background: rgb(12, 13, 15)"]{background:transparent!important}
[data-r=main] [style*="background: rgb(18, 20, 23)"]{background:#181b20!important;border-color:transparent!important}
[data-r=main] [data-r=period],[data-r=main] [data-r=top],[data-r=main]>div:not([data-r]),[data-r=main] [data-r=rank]{background:#181b20!important;border:none!important;border-radius:12px;overflow:hidden}

}

@media (min-width:761px) and (max-width:1180px){[data-r=mybody]{grid-template-columns:1fr!important;row-gap:12px}}

@keyframes conn-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

[data-r=rail] [data-r=mi]{transition:background .12s}

[data-r=rail] [data-r=mi]:hover{background:#23282e!important}

[data-r=rail] [data-r=mi]:hover a,[data-r=rail] a[data-r=mi]:hover{color:#e6e8ea!important}

@media (max-width:1100px){[data-r=conn]{display:none!important}}

@media (max-width:760px){[data-r=dwal]{display:none!important}}

/* ★ 모바일 잔고 — 데스크톱 칩(dwal)이 760 이하에서 숨으므로 축약 칩을 대신 띄운다.
   같이 브랜드 글자를 감춰 즐은 헤더에 자리를 만든다 — 로고 마크는 남는다.
   ★ 게임은 이 규칙이 없다. 헤더 아래 펼친 지갑 카드(mwal)가 같은 것을 보여준다
     (2026-09-26 디자인: 「모바일은 모든 화면에서 잔고가 보이고, 게임만 펼친 형태」). */
@media (max-width:760px){[data-r=mbal]{display:flex!important}[data-r=hbname]{display:none!important}}

/* ★ 머리는 본문을 내려도 따라온다(시안). 이 한 줄이 없으면 모바일에서
   잔고 칩과 메뉴가 스크롤과 같이 사라진다 — 이식 때 생성기가 전역 규칙로 오해해
   버렸던 것을 되살렸다. 게임은 바깥이 100vh 라 필요 없다. */
[data-r=head]{position:sticky;top:0;z-index:40}

/* ★ 더보기 시트는 모바일 것이다. 데스크톱은 왼쪽 메뉴가 있어서 필요 없다. */
@media (min-width:761px){[data-r=moresheet]{display:none!important}}

/* §19.60 휴대폰 — 기간 탭 4개 한 줄(글자 꺾임 금지), 「기준 …」은 탭 줄 아래 줄로 (375 · 360 에서 한 글자씩 세로로 꺾였다) */
@media (max-width:760px){[data-r=period]{flex-wrap:wrap!important;row-gap:0;padding:0 8px!important}[data-r=period] button{padding:0 10px!important;height:42px!important}[data-r=asof]{flex:1 1 100%;margin-left:0!important;padding:0 2px 8px}}