/* Home on wide screens (linked with media="(min-width: 1200px)", so phones never wait for it): the ranking sidebar
   (owner 11/3 「웹에서 랭킹은 우측배너로 띄워주라」, public/rank-side.js) in a second column, the page as wide as both.
   The top bar's 랭킹 button is for narrower screens. Pages without #rank-side (e.g. /s/<id>) are untouched. */
body:has(#rank-side) .top-rank { display: none; }
body:has(#rank-side) { --side: 300px; --maxw: calc(1120px + var(--side) + 24px); }
body:has(#rank-side) main { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); column-gap: 24px; align-items: start; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
body:has(#rank-side) main > :not(.rank-side) { grid-column: 1; min-width: 0; }
body:has(#rank-side) main > .wrap { max-width: none; margin-inline: 0; padding-inline: 0; }
body:has(#rank-side) .hero h1 { font-size: min(var(--text-hero), calc((100vw - 2 * var(--gutter) - var(--side) - 24px) / 14)); }
body:has(#rank-side) .hero p { white-space: normal; }
.rank-side { grid-column: 2; grid-row: 1 / span 30; position: sticky; top: 16px; margin-top: 28px; max-height: calc(100vh - 120px); 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); }
.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; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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); }