.rank-reader{--rank-s0:#5b8cff;--rank-s1:#ffc35a;--rank-s2:#2ee6a6;--rank-s3:#b48cff;--rank-s4:#ff7aa8;--bar-room:64px;--mono:var(--font-tech,"Cascadia Mono",Consolas,monospace)}
:root[data-theme="light"] .rank-reader{--rank-s0:#2357e6;--rank-s1:#8a5a00;--rank-s2:#0b7a55;--rank-s3:#6a48e8;--rank-s4:#b03a68}
/* 나라·기간 버튼 묶음 */
.rank-reader .site-page-filters{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.rank-reader,.rank-reader .site-page-filters,.rank-body,.rank-body>*,.rank-reader .site-page-filters>*{min-width:0;max-width:100%}
.rank-seg-field{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%}
.rank-seg-label{flex:0 0 32px;font-size:var(--fs-sm);font-weight:600;color:var(--text-mute)}
.rank-seg{display:flex;gap:6px;min-width:0;max-width:100%;overflow-x:auto;padding:2px;scrollbar-width:none}
.rank-seg::-webkit-scrollbar{display:none}
.rank-seg-wrap{flex-wrap:wrap;overflow:visible} /* 나라 16개: 옆으로 숨기지 않고 줄바꿈 */
.rank-seg-btn{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:var(--ui-control-height);padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--bg-soft,transparent);color:var(--text-soft);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.rank-seg-btn:hover{border-color:var(--border-strong);color:var(--text)}
.rank-seg-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.rank-seg-btn:disabled{opacity:.45;cursor:not-allowed}
.rank-seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rank-code{display:inline-block;padding:1px 5px;border-radius:4px;background:var(--bg-elev);border:1px solid var(--border);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--text-mute)}
.rank-seg-btn[aria-pressed="true"] .rank-code{color:var(--accent-ink);border-color:var(--accent)}
.rank-body{display:flex;flex-direction:column;gap:var(--ui-section-gap);transition:opacity var(--dur-base) var(--ease)}
.rank-busy{opacity:.45;pointer-events:none}
/* 요약 띠 */
.rank-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.rank-kpi{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--glass-surface,var(--bg-elev))}
.rank-kpi-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;color:var(--text-mute)}
.rank-kpi-value{font-size:22px;font-weight:700;line-height:1.25;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-kpi-sub{font-size:var(--fs-xs);color:var(--text-mute)}
/* 상위 3 카드 */
.rank-podium{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:12px}
.rank-card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:20px;border:1px solid var(--border);border-radius:var(--radius-lg,14px);background:var(--glass-surface,var(--bg-elev));overflow:hidden}
.rank-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent)}
.rank-card-2::before{background:var(--accent-2,var(--accent))}.rank-card-3::before{background:var(--accent-3,var(--accent))}
.rank-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rank-card-no{font-family:var(--mono);font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--accent-ink)}
.rank-card-1 .rank-card-no{font-size:52px}
.rank-card-query{margin:0;font-size:20px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.rank-card-1 .rank-card-query{font-size:24px}
.rank-meaning{font-size:var(--fs-sm);font-weight:500;color:var(--accent-ink)}
.rank-card-meaning{display:block;margin-top:-4px}
.rank-row-meaning{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-card-news{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--text-soft);text-decoration:none}
a.rank-card-news:hover,a.rank-card-news:focus-visible{color:var(--text);text-decoration:underline}
.rank-card-foot{margin-top:auto;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-mute)}
/* 알약 */
.rank-pill{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:46px;height:24px;padding:0 9px;border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.03em;background:var(--bg-elev);color:var(--text-mute);border:1px solid var(--border)}
.rank-pill.rank-same:empty{background:none;border-color:transparent}
.rank-up{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.rank-down{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.rank-new{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
/* 4위 이하 목록 */
.rank-rows{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--border);border-radius:var(--radius);background:var(--glass-surface,var(--bg-elev));overflow:hidden}
.rank-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--border);transition:background-color var(--dur-fast) var(--ease)}
.rank-row:first-child{border-top:0}
.rank-row:hover{background:var(--bg-soft,transparent)}
.rank-row-no{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--text-mute);text-align:center}
.rank-row-main{min-width:0}
.rank-row-query{display:flex;align-items:center;gap:6px;font-weight:600;overflow-wrap:anywhere}
.rank-row-news{display:block;margin-top:3px;font-size:var(--fs-xs);color:var(--text-mute);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.rank-row-news:hover,a.rank-row-news:focus-visible{color:var(--text-soft);text-decoration:underline}
.rank-row-side{display:flex;align-items:center;gap:12px}
.rank-row-vol{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--text-soft);white-space:nowrap}
.rank-row-meta{font-family:var(--mono);font-size:12px;color:var(--text-soft);white-space:nowrap}
.rank-bar{display:block;width:calc(var(--bar-room) * var(--r,0));min-width:4px;height:4px;border-radius:2px;background:var(--accent)}
.rank-shared{display:inline-block;padding:0 6px;border-radius:999px;border:1px solid var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:11px;font-weight:700;white-space:nowrap}
/* 순위 흐름 */
.rank-flow-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rank-flow-head .site-section-title{margin:0}
.rank-flow-scroll{overflow-x:auto;margin-top:8px}
.rank-flow-chart{display:block;width:100%;min-width:520px;height:auto}
.rank-flow-grid{stroke:var(--border);stroke-width:1;stroke-dasharray:3 5}
.rank-flow-axis{fill:var(--text-mute);font-size:12px;font-family:var(--mono)}
.rank-flow-label{font-size:13px;font-weight:700}
.rank-flow-chart path{fill:none;stroke-width:2.5;stroke-linecap:round}
.rank-flow-s0{--c:var(--rank-s0)}.rank-flow-s1{--c:var(--rank-s1)}.rank-flow-s2{--c:var(--rank-s2)}.rank-flow-s3{--c:var(--rank-s3)}.rank-flow-s4{--c:var(--rank-s4)}
.rank-flow-chart g path{stroke:var(--c)}.rank-flow-chart g circle,.rank-flow-chart g .rank-flow-label{fill:var(--c)}
.rank-flow-chart g circle{stroke:var(--bg-elev);stroke-width:2}
/* 전체 비교 */
.rank-shared-panel .site-section-title{margin-bottom:12px}
.rank-shared-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.rank-shared-item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q n" "c c";gap:6px 10px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-soft,transparent)}
.rank-shared-q{grid-area:q;display:flex;flex-direction:column;gap:4px;min-width:0;font-weight:700;overflow-wrap:anywhere}
.rank-shared-about{font-size:var(--fs-xs);font-weight:500;line-height:1.45;color:var(--text-soft)}
.rank-shared-lead .rank-shared-about{font-size:var(--fs-sm)}
.rank-shared-n{grid-area:n;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent-ink)}
.rank-shared-n .rank-pill{min-width:0;height:22px;padding:0 8px;font-size:11px}
.rank-streak{font-family:inherit;font-weight:600;color:var(--text-mute)}
.rank-codes{grid-area:c;display:flex;flex-wrap:wrap;gap:4px 10px}
.rank-member{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--text-soft);min-width:0;max-width:100%;overflow-wrap:anywhere} /* 나라 10개 넘게 같은 검색어여도 코드·글자를 찌그러뜨리지 않고 줄바꿈 */
.rank-member .rank-code{flex:none}
.rank-shared-lead{position:relative;grid-column:1/-1;grid-template-areas:"q n" "m m" "c c";gap:12px 16px;padding:20px;border-radius:var(--radius-lg,14px);background:var(--glass-surface,var(--bg-elev));overflow:hidden}
.rank-shared-lead::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent)} /* 1~3위 카드와 같은 윗선 */
.rank-shared-lead .rank-shared-q{font-size:24px;line-height:1.3}
.rank-shared-meter{grid-area:m;display:flex;align-items:center;gap:14px;min-width:0}
.rank-shared-count{flex:none;font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-mute)}
.rank-shared-count strong{font-size:28px;line-height:1;color:var(--accent-ink)}
.rank-shared-track{position:relative;flex:1 1 auto;max-width:360px;height:6px;border-radius:3px;background:var(--border)}
.rank-shared-track::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(100% * var(--r,0));border-radius:inherit;background:var(--accent)}
.rank-boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rank-board{display:flex;flex-direction:column;gap:10px;min-width:0}
.rank-board-head{display:flex;align-items:center;gap:8px}
.rank-board-head .site-section-title{margin:0}
.rank-board-lead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--text);min-width:0}
.rank-board-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.rank-board-lead strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-md)}
.rank-board-name .rank-meaning{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-board-no{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--accent-ink)}
.rank-board .rank-rows{border:0;background:transparent;border-radius:0}
.rank-board .rank-row{grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:8px 4px}
.rank-board .rank-row-no{font-size:14px}
.rank-board .rank-row-news,.rank-board .rank-row-vol{display:none}
/* 들어올 때 한 번 */
@media(prefers-reduced-motion:no-preference){
  .rank-in{animation:rank-rise var(--dur-slow,640ms) var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
}
@keyframes rank-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.rank-podium{grid-template-columns:1fr 1fr}.rank-card-1{grid-column:1/-1}}
@media(max-width:600px){
  .rank-seg-field{flex-direction:column;align-items:stretch;gap:6px}
  .rank-seg-label{flex:none}
  .rank-seg-wrap{flex-wrap:nowrap;overflow-x:auto} /* 좁은 화면은 6줄이 되므로 기존처럼 옆으로 밀기 */
  .rank-kpis{grid-template-columns:1fr 1fr}
  .rank-kpi{padding:12px 14px}
  .rank-kpi-value{font-size:17px}
  .rank-podium{grid-template-columns:1fr}
  .rank-card{padding:16px}
  .rank-card-no{font-size:32px}
  .rank-card-1 .rank-card-no{font-size:40px}
  .rank-card-query,.rank-card-1 .rank-card-query{font-size:19px}
  .rank-row{grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:10px 12px}
  .rank-row-vol .rank-bar{display:none}
  .rank-flow-chart{min-width:640px}
  .rank-boards{grid-template-columns:1fr}
}
.rank-shared-news{font-weight:500;margin-top:2px} /* 대표 카드 관련 뉴스 1개(1~3위 카드 뉴스와 같은 모양) */
/* 2026-11-12 모바일 가독성: 나라 표시 글씨 11px → 12px */
@media(max-width:600px){.rank-code{font-size:12px}}