.rank-main{width:min(calc(100% - 40px),var(--page-width));margin:120px auto 0}
.rank-header{position:relative;display:flex;min-height:174px;align-items:center;justify-content:space-between;gap:28px;padding:30px clamp(28px,4vw,48px);overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:radial-gradient(circle at 86% 18%,color-mix(in srgb,var(--accent-2) 28%,transparent),transparent 32%),radial-gradient(circle at 10% 100%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 34%),var(--surface-soft);box-shadow:var(--shadow)}
.rank-header>div{position:relative;z-index:1;max-width:720px}
.rank-header .section-kicker{margin:0;color:var(--accent)}
.rank-header h1{margin:6px 0 8px;font-size:clamp(38px,4vw,56px);letter-spacing:-.06em}
.rank-header p:last-child{margin:0;color:var(--text-muted);font-size:13px;line-height:1.6}
.rank-header-mark{color:color-mix(in srgb,var(--text) 9%,transparent);font-size:clamp(64px,8vw,96px);font-weight:950;line-height:.76;letter-spacing:-.08em;text-align:right}
.rank-controls{position:sticky;top:92px;z-index:30;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:28px 0;padding:16px 18px;border:1px solid var(--border);border-radius:20px;background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:0 14px 38px rgba(0,0,0,.16);backdrop-filter:blur(20px) saturate(140%)}
.rank-control-group{display:flex;min-width:0;align-items:center;gap:13px}
.rank-control-group>strong{flex:0 0 auto;color:var(--text-muted);font-size:11px}
.rank-tab-list{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.rank-tab-list::-webkit-scrollbar{display:none}
.rank-tab-list button{min-height:39px;padding:0 15px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft);color:var(--text-muted);font-size:12px;font-weight:750;cursor:pointer;white-space:nowrap}
.rank-tab-list button:hover,.rank-tab-list button.is-active{border-color:color-mix(in srgb,var(--accent) 65%,var(--border));background:color-mix(in srgb,var(--accent) 17%,var(--surface));color:var(--text)}
.rank-panel[hidden]{display:none!important}
.rank-panel-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:36px 0 20px}
.rank-panel-heading p{margin:0;color:var(--accent)}
.rank-panel-heading h2{margin:5px 0 0;font-size:clamp(26px,3vw,38px)}
.rank-panel-heading>span{color:var(--text-muted);font-size:11px}
.rank-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.rank-entry{position:relative;display:grid;grid-template-columns:54px 74px minmax(0,1fr) minmax(76px,auto);min-height:118px;align-items:center;gap:14px;padding:10px 17px 10px 8px;overflow:hidden;border:1px solid var(--border);border-radius:19px;background:var(--surface-soft);transition:transform .2s ease,border-color .2s ease,background .2s ease}
.rank-entry:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--surface-soft) 88%,var(--accent));transform:translateY(-2px)}
.rank-index{color:color-mix(in srgb,var(--text-muted) 34%,transparent);font-size:40px;font-weight:950;letter-spacing:-.1em;text-align:center}
.rank-entry:nth-child(-n+3) .rank-index{color:var(--accent)}
.rank-cover{display:block;width:68px;aspect-ratio:2/3;overflow:hidden;border-radius:12px;background:var(--surface)}
.rank-cover img{width:100%;height:100%;object-fit:cover}
.rank-copy{min-width:0}
.rank-copy small{color:var(--accent);font-size:10px;font-weight:800}
.rank-copy h3{margin:5px 0 7px;overflow:hidden;font-size:17px;text-overflow:ellipsis;white-space:nowrap}
.rank-copy p{margin:0;overflow:hidden;color:var(--text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.rank-value{display:flex;align-items:flex-end;flex-direction:column}
.rank-value strong{max-width:120px;overflow:hidden;color:var(--text);font-size:17px;text-overflow:ellipsis}
.rank-value span{margin-top:4px;color:var(--text-muted);font-size:9px}
.rank-main+.site-footer{margin-top:80px}
@media(max-width:1000px){.rank-controls{align-items:stretch;flex-direction:column}
.rank-control-group{justify-content:space-between}
.rank-tab-list{justify-content:flex-end}
.rank-list{grid-template-columns:1fr}
}
@media(max-width:820px){.rank-main{width:calc(100% - 24px);margin-top:86px}
.rank-header{min-height:150px;padding:24px 18px}
.rank-header h1{font-size:38px}
.rank-header-mark{font-size:64px}
.rank-controls{top:80px;margin:18px 0;padding:13px;border-radius:17px}
.rank-control-group{align-items:flex-start;flex-direction:column;gap:8px}
.rank-tab-list{width:100%;justify-content:flex-start}
.rank-tab-list button{min-height:37px;padding-inline:13px}
.rank-panel-heading{margin-top:28px}
.rank-entry{grid-template-columns:42px 66px minmax(0,1fr) minmax(62px,auto);min-height:108px;gap:10px;padding:8px 11px 8px 5px}
.rank-index{font-size:31px}
.rank-cover{width:62px}
.rank-copy h3{font-size:15px}
.rank-value strong{max-width:76px;font-size:14px}
}
@media(max-width:520px){.rank-header{min-height:140px;padding:21px 16px}
.rank-header h1{font-size:34px}
.rank-header p:last-child{font-size:11px;line-height:1.65}
.rank-header-mark{display:none}
.rank-controls{position:relative;top:auto}
.rank-panel-heading>span{display:none}
.rank-entry{grid-template-columns:32px 58px minmax(0,1fr) 52px;min-height:98px;border-radius:16px}
.rank-index{font-size:25px}
.rank-cover{width:54px}
.rank-copy h3{font-size:14px}
.rank-copy p{font-size:10px}
.rank-value strong{max-width:52px;font-size:12px}
.rank-value span{font-size:8px}
}