/* ── Pace 카드 (ALL-TIME) ── */
.pace-card{
  background:var(--card);border:1px solid var(--border);border-radius:13px;
  padding:13px 15px 11px;margin:2px 0 14px;cursor:pointer;
  box-shadow:0 1px 6px rgba(0,0,0,0.08);
}
.pace-card:active{border-color:var(--accent2);}
.pace-head{display:flex;justify-content:space-between;align-items:center;}
/* 페이스 VS 듀얼(B1) — 왼쪽 항상 올해(+est.), 오른쪽 라이벌(바로 윗 순위/1위면 추격자).
   숫자 칸 3ch·gap 알약 최소 폭 고정 → 재생 중에도 VS가 움직이지 않음 */
.pace-duel{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:8px;margin:8px 0 2px;}
.pace-duel .pd-nm{min-width:0;display:flex;flex-direction:column;gap:2.5px;align-items:flex-start;} /* stretch 방지 — 서브가 콘텐츠 폭이어야 .pd-tie(*)가 글자 바로 옆에 붙음 */
.pace-duel .pd-nm.r{align-items:flex-end;text-align:right;}
.pd-yl{font-family:var(--font-mono);font-weight:700;font-size:11px;line-height:1;}
.pd-sub{font-family:var(--font-mono);font-size:9px;font-weight:700;line-height:1;opacity:.9;position:relative;}
.pd-tie{font-style:normal;position:absolute;left:calc(100% + 1px);top:-1px;} /* 공동 * — '1위'는 부동, 연도 오른쪽 밖으로 살짝 */
.pd-big{font-family:var(--font-mono);font-weight:700;font-size:30px;line-height:1;flex:0 0 auto;display:flex;align-items:baseline;position:relative;}
.pd-big .v{min-width:3ch;}
.pd-lft .v{text-align:right;}
.pd-rgt .v{text-align:left;}
/* est.는 지수처럼 숫자 우상단 절대배치 — 레이아웃 폭 0이라 VS·gap과 안 겹치고 부동 */
.pd-esttag{position:absolute;left:calc(100% + 1px);top:3px;font-family:var(--font-mono);font-size:7px;font-weight:700;visibility:hidden;} /* top 3px = 숫자 글리프 윗선 정렬, 축소 */
.pd-esttag.on{visibility:visible;}
.pd-vs{font-family:var(--font-display);font-size:13px;letter-spacing:1px;color:var(--text3);display:flex;flex-direction:column;align-items:center;gap:2px;}
.pd-gap{font-style:normal;font-family:var(--font-gap);font-weight:700;font-size:8.5px;line-height:1;border:1px solid currentColor;border-radius:999px;padding:2.5px 6.5px;min-width:46px;text-align:center;box-sizing:border-box;}
/* gap 치이잉 — 틴트 밴드 스윕 + 색 글로우 링 + 팝. 라이트에서 확정된 스타일을 양 테마 공용화 —
   다크는 밴드·테두리를 밝은 쪽으로 조색(어두운 카드 위에서 빛나게), 라이트는 짙은 쪽. */
.gap-ching{
  --ching-soft:color-mix(in srgb, var(--metal-base) 45%, #fff);
  --ching-core:color-mix(in srgb, var(--metal-base) 70%, #fff);
  --ching-border:color-mix(in srgb, var(--metal-base) 55%, #fff);
  background-image:linear-gradient(65deg,
    transparent 0%, transparent 41%,
    var(--ching-soft) 47%, var(--ching-core) 50%, var(--ching-soft) 53%,
    transparent 59%, transparent 100%);
  background-size:300% 300%;
  animation:gapSweep .6s cubic-bezier(.4,.05,.2,1) 1 forwards, gapGlow2 .6s ease 1;
}
[data-theme="light"] .gap-ching{--ching-soft:color-mix(in srgb, var(--metal-base) 26%, #fff);--ching-core:color-mix(in srgb, var(--metal-base) 44%, #fff);--ching-border:color-mix(in srgb, var(--metal-base) 65%, #000);}
@media(prefers-color-scheme:light){[data-theme="system"] .gap-ching{--ching-soft:color-mix(in srgb, var(--metal-base) 26%, #fff);--ching-core:color-mix(in srgb, var(--metal-base) 44%, #fff);--ching-border:color-mix(in srgb, var(--metal-base) 65%, #000);}}
@keyframes gapSweep{0%{background-position:100% 0%;}100%{background-position:0% 100%;}}
@keyframes gapGlow2{
  0%,100%{box-shadow:none;transform:scale(1);}
  45%{box-shadow:0 0 0 2.5px color-mix(in srgb, var(--metal-base) 20%, transparent), 0 0 10px color-mix(in srgb, var(--metal-base) 58%, transparent);
      border-color:var(--ching-border);transform:scale(1.1);}
}
/* 숫자 치이잉(별점 평균 밴드 승격/강등) — macOS 원형 그대로 텍스트 금속 스윕 */
.num-ching{
  --metal-shoulder:color-mix(in srgb, var(--metal-base) 45%, #fff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:300% 300%;
  background-image:linear-gradient(65deg,
    var(--metal-base) 0%, var(--metal-base) 41%,
    var(--metal-shoulder) 46%, #fff 50%, var(--metal-shoulder) 54%,
    var(--metal-base) 59%, var(--metal-base) 100%);
  animation:gapSweep .6s cubic-bezier(.4,.05,.2,1) 1 forwards;
}
@media (prefers-reduced-motion: reduce){.gap-ching,.num-ching{animation:none;background:none;-webkit-text-fill-color:currentColor;}}
/* 연도 행 게이지 — 표와 공존(행 아래 얇은 바), 스케일 = 스파크라인 yMax */
.pace-gauge{grid-column:1/-1;height:2.5px;border-radius:2px;background:var(--bg2);overflow:hidden;margin-top:4px;align-self:stretch;}
.pace-gauge i{display:block;height:100%;}
/* 페이스 컨트롤 — 유휴 시에도 날짜 상주(기존 pace-date 대체) */
.pc-ctl .sb-date{font-size:10px;}
.pc-ctl[data-st="idle"] .sb-date{display:inline;}
/* ── CINEMAS 상세 (목업 확정본: 유령선 20 + 주인공 2 + 살아있는 Top 10) ── */
#cinemaView{padding:env(safe-area-inset-top) 0 calc(8px + env(safe-area-inset-bottom));}
#cinemaView .pace-view-head{padding:0 14px 6px;gap:6px;}
#cinemaView .pace-view-title{font-size:12px;letter-spacing:2.5px;color:var(--text3);}
/* 긴 제목(MOST WATCHED DIRECTORS)은 HOF 헤더와 같은 크기로 줄인다 — 그래야 패널
   스위치·재생·닫기가 한 줄에 같이 들어가고 제목이 접히지 않는다. */
#cinemaView.cn-longtitle .pace-view-title{font-size:10.5px;letter-spacing:1.6px;white-space:nowrap;}
/* 제목이 길어 헤더 오른쪽이 비므로 스위치를 제목에 붙인다 — .cn-ranktog의 기본
   margin-left:10px는 짧은 제목(CINEMAS)에서 숨통을 틔우려던 값이라 여기선 뺀다. */
#cinemaView.cn-longtitle .cn-ranktog{margin-left:0;}
.cn-ctl .sb-date{font-size:10px;}
.cn-ctl[data-st="idle"] .sb-date{display:inline;}
.pace-view-head .cn-ctl{margin-left:auto;margin-right:0;}
#cinemaView #cnCloseBtn{margin-top:-2px;}
.cn-body{position:relative;flex:1;overflow:hidden;padding:2px 0 0;display:flex;flex-direction:column;gap:7px;}
.cn-body > *{flex-shrink:0;}
.cn-body > .pace-duel{margin:2px 14px 0;}
.cn-body > .podium{margin:0 14px;justify-content:flex-start;}
.cn-anm{font-size:9.5px;color:var(--text2);line-height:1.35;}
/* ── 3자 포디움 헤드라인(감독) — 듀얼의 확장: 세 자리 + 인접 격차 2개.
   한 자리 = 순위 / 이름(성이 아랫줄) / 숫자 세 단. 상세(.pace-duel)와 메인화면 카드(.sb-duel)가
   같은 마크업을 쓴다 — 겹치는 두 컨테이너를 이기려면 복합 선택자여야 한다.
   세 열을 같은 폭(1fr)으로 묶어야 자리 간격이 일정해지고, 그래야 JS가 슬롯을
   두 홈 좌표의 차만큼 translateX 해 자리바꿈시킬 수 있다(레인 FLIP과 같은 규칙).
   색은 슬롯에 인라인 — 순위·이름·숫자가 그대로 상속받는다. ── */
.pace-duel.cn-trio,.sb-duel.cn-trio{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:5px;align-items:end;}
.pt-s{min-width:0;display:flex;flex-direction:column;align-items:center;gap:2.5px;
  transition:transform .45s cubic-bezier(.3,.9,.35,1.08);}
.pt-rk{font-family:var(--font-mono);font-size:9px;font-weight:700;line-height:1;opacity:.85;}
.pt-tie{font-style:normal;}
/* 이름은 두 줄 고정(성이 아랫줄) — 한 단어 이름은 윗줄이 비어 숫자 높이가 어긋나지 않는다 */
.pt-nm{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:100%;
  font-size:9.5px;font-weight:700;line-height:1.25;text-align:center;}
.pt-nm i{font-style:normal;max-width:100%;min-height:1.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pt-n{font-family:var(--font-mono);font-weight:700;font-size:30px;line-height:1;margin-top:1px;}
.pt-n .v{display:inline-block;min-width:2ch;text-align:center;}
.pt-vs{display:flex;align-items:center;justify-content:center;}
/* 격차 알약 — 듀얼 gap(.pd-gap/.sb-gap)과 같은 문법, 테두리 = 글자색(리더 색) */
.pt-g{font-style:normal;font-family:var(--font-gap);font-weight:700;font-size:8.5px;line-height:1;
  border:1px solid currentColor;border-radius:999px;padding:2.5px 6.5px;min-width:40px;text-align:center;box-sizing:border-box;}
/* LEAD 헤더에 알약 둘(3자판) */
.cn-laneh .ldpair{display:flex;align-items:center;gap:5px;}
.cn-chartwrap{line-height:0;position:relative;}
.cn-chart{display:block;width:100%;max-width:none;height:auto;touch-action:none;}
/* ── 레이스판 가로모드(CINEMAS) — 좌 차트 : 우(듀얼·TOP2·LEAD·SEASONS) = 50:50 (목업 확정).
   포디움 숨김, 헤더는 우상단 플로팅(타이틀 숨김) — PACE 가로와 동일 문법.
   레인 수(2)·차트/LEAD 크기는 JS relayout이 실측해 다시 그린다. ── */
@media (orientation: landscape){
  /* 아래 인셋 확보 — 홈 인디케이터가 차트 연도 라벨('25 '26)과 겹치던 것 방지 */
  #cinemaView{padding:0 env(safe-area-inset-right) calc(4px + env(safe-area-inset-bottom)) env(safe-area-inset-left);}
  #cinemaView .pace-view-head{position:absolute;top:6px;right:calc(10px + env(safe-area-inset-right));left:auto;padding:0;z-index:5;}
  #cinemaView .pace-view-title{display:none;}
  #cinemaView .cn-ranktog{display:none;} /* 가로는 두 모드를 한 화면에 다 보여줘 토글 불필요 */
  /* 행을 4개로 명시 — CINEMAS는 슬라이드랩이 2행부터 전부 차지하고, FORMATS·BRANDS는
     슬라이드랩이 없어 블록이 직접 행에 놓인다. 명시하지 않으면 자동배치가 암시적 행을 만들어
     grid-row:1/3인 차트가 앞 2행 높이(≈188px)로 반토막 난다. */
  .cn-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);grid-template-rows:auto auto auto minmax(0,1fr);gap:7px 10px;padding:4px 6px;align-content:start;}
  .cn-body > .cn-chartwrap{grid-column:1;grid-row:1/-1;min-height:0;margin:0;}
  .cn-body > .cn-chartwrap .cn-chart{position:absolute;inset:0;width:100%;height:100%;}
  .cn-body > .podium{display:none;}
  .cn-body > .pace-duel{grid-column:2;grid-row:1;margin:30px 0 0;}
  .cn-body > .cn-slidewrap{grid-column:2;grid-row:2/-1;margin:0;min-height:0;display:flex;flex-direction:column;gap:7px;overflow:hidden;}
  /* 슬라이드랩이 없는 뷰(FORMATS·BRANDS) — 2열에 행별로 쌓는다(LEAD와 SHARE는 상호배타) */
  .cn-body > .cn-lanewrap{grid-column:2;grid-row:2;}
  .cn-body > .cn-leadwrap,.cn-body > .cn-sharewrap{grid-column:2;grid-row:3;}
  .cn-body > .cn-seasonwrap{grid-column:2;grid-row:4;align-self:start;}
  .cn-body .pace-duel .pd-big{font-size:24px;}
  .cn-body .cn-trio .pt-n{font-size:24px;}
  /* 좌우 14px 여백 제거 — CINEMAS는 이들이 .cn-slidewrap 안에 중첩돼 직계 선택자로는 안 잡혔고,
     그만큼(28px) 오른쪽 열이 좁아져 화면 오른쪽이 비어 보였다. 자손 선택자로 확실히 0. */
  .cn-body .cn-leadwrap,.cn-body .cn-seasonwrap,.cn-body .cn-sharewrap{margin:0;}
  /* 막대가 끝나는 지점 — 아래 블록(LEAD·SHARE)과 구분되게 살짝 띄운다(행 간격 7 + 7 = 14px) */
  .cn-body .cn-lanewrap{margin:0 0 7px;}
  .cn-body .cn-leadwrap .cn-laneh,.cn-body .cn-seasonwrap .cn-laneh{margin:0;}
  .cn-body .cn-slidewrap > *{flex:0 0 auto;}
  /* RANKING·NOW 헤더는 가로에서 생략(듀얼이 이미 주인공을 말해주고, 날짜는 상단 컨트롤에 있음) */
  #cinemaView .cn-lanewrap .cn-laneh{display:none;}
  /* 가로 레인 = 슬림 막대그래프(목업 확정) — 배지·이름·값이 한 줄에 정렬되고, 막대는 그 아래 전폭.
     .vn을 position:static으로 두어 .bar가 레인 기준으로 잡히게 → 이름 칸이 아니라 행 전체를 채운다. */
  /* 높이·글자는 변수로 — 항목이 많은 뷰는 relayout이 값을 낮춰 전부 담는다. */
  #cinemaView .cn-lane{box-sizing:border-box;height:var(--cnLaneH,40px);grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding-bottom:var(--cnLanePB,12px);}
  #cinemaView .cn-lane::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;border-radius:3.5px;background:var(--bg2);}
  #cinemaView .cn-lane .vn{position:static;font-size:var(--cnLaneFS,13px);padding-bottom:0;line-height:1.2;}
  #cinemaView .cn-lane .vn .bar{left:0;bottom:0;height:7px;border-radius:3.5px;z-index:1;transition:width .3s ease;}
  #cinemaView .cn-lane .ct{font-size:var(--cnLaneCT,15px);}
}
.cn-lanewrap{margin:0 14px;min-height:0;display:flex;flex-direction:column;}
.cn-laneh{display:flex;justify-content:space-between;align-items:center;padding:0 2px 4px;}
.cn-laneh .lt{font-family:var(--font-display);font-size:11px;letter-spacing:2px;color:var(--text3);}
.cn-laneh .ld{font-family:var(--font-mono);font-size:8.5px;color:var(--text3);}
/* LEAD 헤더 격차 — 듀얼 gap 알약의 축소판(테두리+치이잉), 방해 안 되게 컴팩트하게.
   표기도 듀얼 gap과 동일한 '↑ N'이라 --font-gap(화살표만 시스템 굵은 ↑, 숫자는 Space Mono).
   테두리=currentColor=인라인 색(리드 측/동률 시 text3). 치이잉(gap-ching)이 알약 위로 흐름.
   min-width 고정 — 상단 gap(.pd-gap)처럼 값이 0·한/두/세 자리로 바뀌어도 알약 크기 불변.
   셀렉터를 .cn-laneh로 스코프 — `.cn-laneh .ld`(0,2,0)가 font-family를 덮어 화살표가
   Space Mono 얇은 ↑로 렌더되던 것 차단(동일 특정도 + 후순위로 --font-gap 승리). */
.cn-laneh .ldgaph,.cn-laneh .lddgaph{font-family:var(--font-gap);font-weight:700;border:1px solid currentColor;border-radius:999px;padding:1.5px 5.5px;min-width:44px;line-height:1;box-sizing:border-box;text-align:center;}
.cn-lanes{position:relative;}
.cn-lane{position:absolute;left:0;right:0;height:26px;display:grid;grid-template-columns:30px 1fr 40px;align-items:center;gap:8px;
  transition:top .45s cubic-bezier(.3,.9,.35,1.08),opacity .3s ease,transform .3s ease;}
.cn-lane.out{opacity:0;transform:translateX(16px);pointer-events:none;}
.cn-lane .rk{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:#fff;background:var(--vc);border-radius:7px;padding:3px 0;text-align:center;line-height:1;}
.cn-lane .vn{min-width:0;font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;padding-bottom:7px;}
.cn-lane .vn.hero{font-weight:700;}
.cn-lane .vn .bar{position:absolute;left:0;bottom:0;height:3px;border-radius:2px;background:var(--vc);transition:width .3s ease;}
.cn-lane .ct{font-family:var(--font-mono);font-weight:700;font-size:12px;text-align:right;color:var(--vc);}
/* 포디움 분할 알약(고정 슬롯 4 — 초반 2곳뿐이어도 폭 고정, 왼쪽부터) */
.pod3{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card);min-width:0;flex:0 0 calc((100% - 18px) / 4);}
.pod3 .face{display:flex;align-items:center;justify-content:center;background:var(--pc);color:#fff;font-family:var(--font-mono);font-size:8px;font-weight:700;padding:0 5px;line-height:1;flex-shrink:0;}
.pod3 .col{display:flex;flex-direction:column;justify-content:center;gap:2.5px;padding:4.5px 7px;min-width:0;flex:1;}
.pod3 .col i{font-style:normal;font-size:8.5px;font-weight:700;color:var(--pc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1;}
.pod3 .col b{font-family:var(--font-mono);font-size:13.5px;font-weight:700;color:var(--pc);line-height:1;}
.pace-title{font-family:var(--font-display);font-size:12px;letter-spacing:2.5px;color:var(--text3);}
.pace-date{font-family:var(--font-mono);font-size:11px;color:var(--text2);}
.pace-nums{display:flex;align-items:baseline;gap:8px;margin:6px 0 2px;}
.pace-now{font-family:var(--font-mono);font-size:30px;font-weight:700;color:var(--text);line-height:1;}
.pace-arrow{font-size:14px;color:var(--text3);}
.pace-proj{font-family:var(--font-mono);font-size:21px;font-weight:700;line-height:1;}
.pace-est{font-size:11px;opacity:.75;}
.pace-y-est{font-family:var(--font-mono);font-size:10px;font-weight:400;opacity:.7;}
.pace-spark{display:block;width:100%;margin:6px 0 9px;}
.pace-years{display:flex;flex-direction:column;}
.pace-years-head,
.pace-year-row{
  display:grid;
  grid-template-columns:76px 1.1fr 1fr 30px 1.1fr 1fr;
  align-items:baseline;column-gap:8px;
}
.pace-years-head{padding:0 2px 5px;align-items:center;} /* 정렬 버튼(svg)과 날짜 라벨 세로 맞춤 */
.pace-col-label{
  font-size:9px;color:var(--text3);letter-spacing:0.5px;text-transform:uppercase;
  text-align:right;font-family:var(--font-mono);
}
.pace-year-row{padding:5.5px 2px;border-top:1px solid var(--border);}
.pace-y-year{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-size:13px;letter-spacing:1.5px;
}
.pace-y-year i{width:7px;height:7px;border-radius:2px;flex-shrink:0;}
.pace-y-year{position:relative;}
.py-rank{font-style:normal;font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:inherit;opacity:.92;letter-spacing:0;line-height:1;margin-left:-1px;white-space:nowrap;flex-shrink:0;position:relative;} /* 연도색 상속, 한 줄 고정 */
.py-tie{font-style:normal;position:absolute;left:calc(100% + 1px);top:-1.5px;font-size:8px;} /* 공동 * — N위는 부동, 별표만 오른쪽 오버행 */
/* 정렬 토글(연대순⇄순위순 리더보드) + FLIP 오르내림 플래시 */
.py-sort{border:none;background:none;color:var(--text3);opacity:.75;padding:4px 8px 4px 0;margin:-4px 0;display:flex;align-items:center;cursor:pointer;}
.py-sort.on{color:var(--accent);opacity:1;}
.py-sort svg{width:11px;height:11px;display:block;}
/* 순위 변동 지표 — ▲/▼ 아우라 팝, 잠깐 유지 후 페이드. 절대배치 = 폭 0(레이아웃 불변) */
.py-move{font-style:normal;font-size:7.5px;line-height:1;opacity:0;transition:opacity .35s ease;position:absolute;left:calc(100% + 2px);top:50%;margin-top:-4px;}
.py-move.up{color:var(--green);text-shadow:0 0 6px rgba(126,200,126,.9);}
.py-move.down{color:var(--red);text-shadow:0 0 6px rgba(224,85,85,.85);}
.py-move.show{opacity:1;animation:pyPop .35s cubic-bezier(.3,1.4,.5,1);}
@keyframes pyPop{from{transform:scale(.4);}to{transform:scale(1);}}
.pace-y-at,.pace-y-total{
  font-family:var(--font-mono);font-size:13px;font-weight:700;text-align:right;
}
.pace-y-arrow{color:var(--text3);font-size:11px;text-align:center;font-family:var(--font-mono);}
.pace-year-row b{
  font-family:var(--font-mono);font-weight:700;font-size:10.5px;text-align:left;
}
.pace-year-row .pace-up{color:var(--green);}
.pace-year-row .pace-down{color:var(--red);}
.pace-year-row .pace-even{color:var(--text3);}

/* ── 표 밑 순위 차트 (카드) ──────────────────────────────────────────
   연도 표 다음에 온다 — 표의 행 순서가 곧 차트 오른쪽 끝 순위라 이어져 읽힌다. */
.pc-rank{margin:9px 0 1px;border-top:1px solid var(--border);padding-top:8px;}
/* 왼쪽 패딩 0 — 아래 순위 숫자(1~8)와 RANKING의 R이 같은 세로선에 선다 */
.pc-rank-h{display:flex;justify-content:space-between;align-items:center;padding:0 1px 3px 0;}
/* 헤드에 이미 날짜가 있다 — 정지 상태에서 두 번 뜨면 고장처럼 보인다.
   재생 중에는 보고 있는 차트 옆이 곧 읽을 자리라 그때만 띄운다. */
.pc-rank .pc-ctl[data-st="idle"] .sb-date{display:none;}
.pc-rank .pc-ctl{margin-right:-4px;}
/* 제목이 문이다 — 다른 카드의 .sb-title과 같은 꼴(Bebas)로 두어 누를 것처럼 보이게 한다.
   누르면 순위만의 화면(#rankView)이 열린다. */
.pc-rank-l{font-family:var(--font-display);font-size:12px;letter-spacing:2.5px;color:var(--text3);
  cursor:pointer;padding:6px 8px 6px 0;margin:-6px 0;-webkit-tap-highlight-color:transparent;}
.pc-rank-l:active{color:var(--accent);}
.rk-svg{display:block;width:100%;height:auto;}
/* 재생 — 점은 뿅 뜨고(스케일), 글자는 페이드. 정지 상태에서는 전부 보인다. */
.rk-p{transform-box:fill-box;transform-origin:center;transition:transform .2s cubic-bezier(.34,1.56,.64,1);}
.rk-tie,.rk-yl{transition:opacity .3s ease;}
.rk-playing .rk-p{transform:scale(0);}
.rk-playing .rk-p.rk-on{transform:scale(1);}
.rk-playing .rk-tie,.rk-playing .rk-yl{opacity:0;}
.rk-playing .rk-tie.rk-on,.rk-playing .rk-yl.rk-on{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .rk-p,.rk-tie,.rk-yl{transition:none;}
}



/* ── 순위 전용 화면 ── */
/* 차트 위에 히트맵이 아니라 '아래'에 온다 — 세로로 쌓아야 한다(가로면 차트가 눌린다).
   차트는 제 비율대로 두고 남는 자리는 위아래 여백으로 — 끝까지 늘리면 오르내림이 과장된다. */
.rk-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;}
.rk-wrap{width:100%;flex:0 0 auto;}
.rk-wrap svg{display:block;width:100%;height:auto;}
/* 제목은 카드 타이틀 문법(작고 어둡게), 재생·✕는 오른쪽 끝으로 */
#rankView .pace-view-head{padding:0 14px 6px;gap:6px;}
#rankView .pace-view-title{font-size:12px;letter-spacing:2.5px;color:var(--text3);}
#rankView .rk-ctl{margin-left:auto;margin-right:0;}
#rankView #rkCloseBtn{margin-top:-2px;}   /* ✕ 노치 바로 밑 — PACE 상세와 같은 규칙 */
#rankView .rk-ctl .sb-date{font-size:10px;}
#rankView .rk-big{--rk-halo:var(--bg);touch-action:pan-y;}
/* 순위 체류 히트맵 — 진할수록 그 순위에서 오래 살았다 */
.rk-heat{margin-top:8px;padding:0 14px;}
/* 정렬 버튼은 이름 바로 옆에 — 화면 반대편에 있으면 무엇을 정렬하는지 안 붙는다 */
.rk-hh{display:flex;align-items:center;gap:2px;padding:0 2px 5px;}
.rk-hh .lt{font-family:var(--font-display);font-size:11px;letter-spacing:2px;color:var(--text3);}
.rk-hh .rt{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;color:var(--text3);opacity:.7;}
.rk-sort{padding:4px 6px;}
.rk-hg{display:grid;grid-template-columns:34px repeat(var(--n,8),1fr);gap:3px;}
/* --a(그 순위로 보낸 비율)를 등록해 두면 값이 바뀔 때 색이 튀지 않고 스며든다.
   등록이 안 되는 브라우저에서는 전환만 빠지고 그림은 같다. */
@property --a{syntax:'<number>';inherits:false;initial-value:0;}
.rk-hc{height:var(--rk-cell,21px);border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--text3);}
/* 배경은 늘 깔아 두고 보이고 안 보이고는 opacity가 정한다 — 그래야 켜질 때
   색이 통째로 '착' 하고 나타나지 않고 옅은 데서 번져 올라온다. */
.rk-hc[data-y]{--a:0;opacity:0;transform:scale(.9);
  background:color-mix(in oklab,var(--c) calc(20% + var(--a) * 80%),var(--bg2));color:#fff;
  transition:--a .42s ease, opacity .3s ease, transform .34s cubic-bezier(.34,1.26,.5,1);
  transition-delay:var(--d,0ms);}
.rk-hc[data-y].on{opacity:1;transform:scale(1);}
/* 수가 한 칸 오를 때 — 자판을 누르듯 타일이 눌렸다 선다.
   아래를 축으로 눌러야 '한 겹 얹혔다'로 읽힌다. 폭은 수와 무관하게 늘 같다:
   색은 한 칸당 3.3%p씩만 더해져 위쪽에선 차이가 안 보이는데, 눌림까지 옅어지면
   3→4는 살아 있고 15→16은 죽는다. 밝기도 고정폭으로 같이 얹는다. */
.rk-hc[data-y]{transform-origin:50% 100%;overflow:hidden;}
/* 숫자는 계수기다 — 통에 두 칸을 세워 두고 한 칸씩 굴린다. 옛 수가 위로
   빠지고 새 수가 아래에서 올라온다. 색은 위쪽에서 거의 안 변하니 '올랐다'를
   숫자가 직접 말해 준다. */
.rk-hc[data-y] i{position:absolute;inset:0;height:200%;display:flex;
  flex-direction:column;font-style:normal;
  transform:translateY(calc(var(--s,0) * -50%));
  transition:transform .28s cubic-bezier(.34,1.14,.5,1);}
.rk-hc[data-y] i b{flex:0 0 50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;}
/* 같은 장면을 이름만 둘로 둔다 — 클래스를 번갈아 붙여도 animation-name이
   그대로면 브라우저는 다시 틀지 않는다(첫 증가만 눌리고 그 뒤로는 죽는다). */
@keyframes rk-key{
  0%{transform:scaleY(1) scaleX(1);filter:brightness(1);}
  24%{transform:scaleY(.80) scaleX(.945);filter:brightness(1.28);}
  60%{transform:scaleY(1.05) scaleX(1.008);filter:brightness(1.06);}
  100%{transform:scaleY(1) scaleX(1);filter:brightness(1);}}
@keyframes rk-key2{
  0%{transform:scaleY(1) scaleX(1);filter:brightness(1);}
  24%{transform:scaleY(.80) scaleX(.945);filter:brightness(1.28);}
  60%{transform:scaleY(1.05) scaleX(1.008);filter:brightness(1.06);}
  100%{transform:scaleY(1) scaleX(1);filter:brightness(1);}}
.rk-hc[data-y].bmpA{animation:rk-key .3s cubic-bezier(.3,.9,.4,1);}
.rk-hc[data-y].bmpB{animation:rk-key2 .3s cubic-bezier(.3,.9,.4,1);}
@media (prefers-reduced-motion:reduce){
  .rk-hc[data-y]{transition:none;transform:none;}
  .rk-hc[data-y] i{transition:none;}
  .rk-hc[data-y].bmpA,.rk-hc[data-y].bmpB{animation:none;}
}
.rk-ht{height:14px;font-size:8px;}
.rk-hy{display:flex;align-items:center;font-family:var(--font-mono);font-size:10px;font-weight:700;}