/* Home 랭킹 banner (owner 11/3 「웹에서 랭킹은 우측배너로 띄워주라」 「페이지를 벗어나는 배너」, public/rank-side.js). Linked with
   media="(min-width: 1200px)" because rank-side.js shows the box from 1200px, but the banner is a floating banner in the
   right margin, never a page column (owner 11/3 「랭킹은 전체페이지 로쓰지말라고... 배너처음 플로팅 배너처럼」): the page
   keeps the same 1120px .wrap (1088px content) and x positions as without it, and the banner shows only where the
   margin fits it. Fit: 1088 content + 2 x (24 gap + 280 banner + 16 edge) = 1728px, so below that it hides and the
   top bar's 랭킹 button (every width) is the way in. Pages without #rank-side (e.g. /s/<id>) are untouched. */
@media (max-width: 1727.98px) { .rank-side { display: none; } }
@media (min-width: 1728px) {
  /* Three tracks: empty margin, the page's own 1120px column (same place as the centred .wrap), the right margin.
     The page items sit in the middle track only, so the banner overlaps no cell and moves nothing. */
  body:has(#rank-side) { --side: 280px; --side-gap: 8px; }
  body:has(#rank-side) main { display: grid; grid-template-columns: minmax(0, 1fr) min(100%, var(--maxw)) minmax(0, 1fr); align-items: start; }
  body:has(#rank-side) main > :not(.rank-side) { grid-column: 2; min-width: 0; margin-inline: 0; }
  /* Top edge on the 접속자 · 야영지 · 랜덤입장 row (owner 11/3 「탑부분을 랜덤입장까지만 맞춰」: row 2, its 4px margin);
     sticky so it floats with the scroll; max-height keeps the bottom above the chat button below it. */
  .rank-side { grid-column: 3; grid-row: 2 / span 30; justify-self: start; width: var(--side); margin-left: var(--side-gap); position: sticky; top: 16px; margin-top: 4px; max-height: calc(100vh - 330px); min-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
  /* Chat (owner 11/3 「채팅은 우측끝에 붙혀서 화면이 크면 바깥으로」 「이상황에는 여기」): button at the foot of the banner on
     its page-side edge, the sheet opening from it; narrower screens keep styles.css (inside the page's right edge).
     % on a fixed box is the viewport without its scrollbar, the same width main is centred in. */
  body:has(#rank-side) { --side-left: calc(50% + var(--maxw) / 2 + var(--side-gap)); }
  body:has(#rank-side) .chat-fab { right: auto; left: var(--side-left); }
  body:has(#rank-side) .chat-sheet { right: auto; left: var(--side-left); width: min(360px, calc(100% - var(--side-left) - var(--gutter))); }
}
.rank-side .nu-head { margin: 10px 0; }
.rs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rs-item a { display: grid; grid-template-columns: 1.5rem 80px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; color: inherit; text-decoration: none; }
.rs-item a:hover, .rs-item a:focus-visible { outline: 2px solid var(--lantern); outline-offset: -2px; }
.rs-no { text-align: center; font-weight: 800; color: var(--ink-2); }
.rs-top .rs-no { color: var(--lantern); }
.rs-pic { width: 80px; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 8px; background: var(--rule); display: grid; place-items: center; font-size: 0.8rem; }
.rs-body { display: grid; gap: 2px; min-width: 0; }
.rs-name { font-weight: 700; font-size: 0.92rem; display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.rs-nm { overflow: hidden; text-overflow: ellipsis; }
.rs-meta { font-size: 0.78rem; color: var(--ink-2); }
.rs-tabs { display: flex; gap: 4px; margin: 0 0 8px; }
.rs-tab { flex: 1; padding: 6px 4px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.rs-tab:hover { color: var(--ink); border-color: var(--ink-2); }
.rs-tab:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; }
.rs-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }