/* Cinema Diary Mobile — LEADERBOARD (10편 단위 기록판)
   PACE 상세 헤더의 포디움 버튼으로 열린다. 화면 골격은 #paceView와 같은 .pace-view를 쓰고,
   여기서는 그 안쪽(차트 두 장 · 표)만 정의한다. */

/* 격차 색 — 연도 팔레트(PACE_COLORS)에 없는 핑크. '연도가 아니라 값'이라는 신호.
   아우라 세기는 테마마다 다르다(다크가 더 진해야 같은 정도로 보인다). */
:root{--lb-gap:#F0508A;--lb-aura:.16;}
[data-theme="dark"]{--lb-gap:#FF5C8A;--lb-aura:.20;}
@media(prefers-color-scheme:dark){[data-theme="system"]{--lb-gap:#FF5C8A;--lb-aura:.20;}}

/* PACE 헤더의 진입 버튼 — 정렬 토글(.py-sort)과 같은 문법(테두리 없는 text3 아이콘) */

/* 아래 안전영역은 뷰가 먹지 않는다 — 그러면 목록이 화면 끝에서 한참 위에 멈춘다.
   대신 목록 안쪽 패딩으로 넘겨서, 목록은 끝까지 흐르고 마지막 행만 인디케이터를 피한다. */
#lbView{padding:env(safe-area-inset-top) 0 0;}
#lbView .pace-view-head{padding:0 14px 6px;gap:6px;}
/* 스위치가 남는 공간을 밀어낸다 — 재생·✕는 PACE와 같이 오른쪽 끝에 붙는다.
   (auto 여백을 재생과 ✕ 양쪽에 주면 둘이 공간을 나눠 갖고 재생이 가운데 뜬다) */
#lbView .lb-tog{margin-right:auto;}
#lbView .pace-view-title{font-size:12px;letter-spacing:2.5px;color:var(--text3);} /* PACE와 같은 크기·색 */
#lbView #lbCloseBtn{margin-top:-2px;}

/* 위(차트)는 고정, 표만 자체 스크롤 — 마일스톤이 늘어도 차트는 항상 한눈에 */
.lb-body{flex:1;overflow:hidden;padding:2px 0 0;display:flex;flex-direction:column;gap:6px;
  touch-action:pan-y;} /* 세로 스크롤은 브라우저, 가로는 우리가 — 장 넘기기 */
.lb-body > *{flex-shrink:0;}
/* 두 장을 나란히 깔고 트랙을 민다 — 미는 동안 다음 장이 손가락을 따라온다(CINEMAS 문법) */
.lb-panes{line-height:0;overflow:hidden;}
.lb-track{display:flex;width:200%;transition:transform .26s cubic-bezier(.4,0,.2,1);will-change:transform;}
.lb-pane{flex:0 0 50%;min-width:0;display:flex;flex-direction:column;gap:6px;align-self:flex-start;}
.lb-slot{line-height:0;}
/* 레인 이름 — 표가 전부 모노라 헤더도 모노로 맞춘다(앱 기본 .cn-laneh는 Bebas) */
.lb-body .cn-laneh{line-height:normal;padding:0 16px 4px;}
.lb-body .cn-laneh .lt{font-family:var(--font-mono);font-size:9px;letter-spacing:1.6px;}
.lb-lane{line-height:0;}
.lb-svg{display:block;width:100%;height:auto;}

/* ── 고르기 ──────────────────────────────────────────────────────
   SVG를 다시 그리지 않고 클래스만 바꾼다. 흐려짐·글로우·확대는 전부 여기서.
   글로우를 SVG <filter>가 아니라 CSS filter로 두는 이유: 이쪽만 트랜지션이 된다
   (none → drop-shadow가 보간돼 부드럽게 켜진다). 색은 요소마다 --g로 심어둔다. */
/* 막대는 바닥에서 자란다 — HOF 스카이라인과 같은 이징, 왼쪽부터 차례로.
   height 대신 scaleY: SVG geometry 속성은 브라우저마다 트랜지션이 못 미덥다. */
.lb-b{transform-box:fill-box;transform-origin:bottom;
  transition:opacity .22s ease,filter .22s ease,transform .5s cubic-bezier(.22,.61,.36,1);}
.lb-p{transition:opacity .22s ease,filter .22s ease,transform .22s cubic-bezier(.3,1.2,.5,1);}
/* 막대 꼭대기 값 — 막대와 같은 이징으로 함께 올라온다 */
.lb-bv{transition:opacity .22s ease,transform .5s cubic-bezier(.22,.61,.36,1);}
.lb-p{transform-box:fill-box;transform-origin:center;}
.lb-svg.sel-on .lb-b:not(.sel),
.lb-svg.sel-on .lb-bv:not(.sel),
.lb-svg.sel-on .lb-p:not(.sel){opacity:.3;}
.lb-b.sel,.lb-p.sel{filter:drop-shadow(0 0 3.4px var(--g)) drop-shadow(0 0 1.4px var(--g));}
.lb-p.sel{transform:scale(1.38);}
/* 값 라벨은 전부 그려두고 고른 것만 보인다 */
.lb-vl{opacity:0;transition:opacity .22s ease;pointer-events:none;}
/* KO는 막대가 다 자란 뒤에 찍힌다 */
.lb-ko{transition:opacity .35s ease;}

/* ── 순위 재생 ── 한 칸씩 켠다. 감춘 것은 자리만 지키고, 켜질 때 톡 튀어나온다. */
.lb-rank .lb-hid{opacity:0;}
.lb-rank .lb-rs,.lb-rank .lb-yl,.lb-rank .lb-tie{transition:opacity .2s ease;}
.lb-rank .lb-pop{animation:lbPop .34s cubic-bezier(.3,1.4,.5,1);}
@keyframes lbPop{from{opacity:0;transform:scale(.35);}to{opacity:1;transform:scale(1);}}
.lb-rank .lb-rs.lb-pop,.lb-rank .lb-yl.lb-pop,.lb-rank .lb-tie.lb-pop{animation:none;}
/* 트랜스포트는 순위 장에서만 */
#lbView .lb-ctl{margin-right:0;}   /* .sb-ctl의 -9px 우측 여백 그대로 — PACE와 같은 간격 */
#lbView .lb-ctl[hidden]{display:none;}
.lb-vl.sel{opacity:1;}

/* ── 표 ──────────────────────────────────────────────────────────
   전부 Space Mono. 게이지는 따로 없다 — 행 배경(아우라)의 가로 길이가 곧 격차다. */
.lb-head,
.lb-row{display:grid;grid-template-columns:52px 1fr 1fr 66px;column-gap:9px;align-items:center;}
.lb-head{padding:3px 24px 6px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:1.2px;
  color:var(--text3);text-transform:uppercase;}
.lb-head .r{text-align:right;}
.lb-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 14px calc(12px + env(safe-area-inset-bottom));}
.lb-board{display:flex;flex-direction:column;}
/* 아우라 — 색 = 1위 연도, 가로 길이 = 격차. 게이지를 겸하므로 길이가 곧 값이다. */
/* 각지지 않게 — 모서리를 둥글리는 게 아니라 '어디서 시작하는지 모르게' 칠한다.
   왼쪽 끝에서 곧장 진하게 시작하면 그 경계가 곧 네모를 그린다. 투명에서 올라와
   한 번 진해졌다 사라지는 번짐으로 둔다(끝나는 지점 = 격차는 그대로). */
.lb-row{padding:8px 10px;font-variant-numeric:tabular-nums;
  background-repeat:no-repeat;cursor:pointer;position:relative;
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--lbc) 0%,transparent) 0%,
    color-mix(in srgb,var(--lbc) calc(var(--lb-aura) * 115%),transparent) calc(var(--lbstop) * 0.3),
    color-mix(in srgb,var(--lbc) 0%,transparent) var(--lbstop));}
.lb-row > span{position:relative;}   /* ::before 위로 — 트리 순서상 뒤라 글자가 덮인다 */
/* 고른 행 — 나머지를 어둡게 하지 않는다. 다른 행이 나가는 게 아니라 이 행에 불이 들어온다.
   불은 '같은 아우라를 더 밝게' 한 겹이다. 퍼지는 글로우로 하면 길이가 뭉개져
   격차가 거짓말을 한다(35일짜리가 73일짜리보다 길어 보인다). */
.lb-row::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .3s ease;
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--lbc) 0%,transparent) 0%,
    color-mix(in srgb,var(--lbc) calc(var(--lb-aura) * 200%),transparent) calc(var(--lbstop) * 0.3),
    color-mix(in srgb,var(--lbc) 0%,transparent) var(--lbstop));
}
.lb-row.on::before{opacity:1;}
/* 행 사이 구분선 — 전폭이 아니라 안쪽으로 물러난 짧은 선 */
.lb-row + .lb-row::after{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;
  background:var(--border);opacity:.55;pointer-events:none;}
.lb-row.on::after,.lb-row.on + .lb-row::after{opacity:0;}
/* 번호·글자는 건드리지 않는다 — 아우라에만 불이 들어온다 */
.lb-svg .lb-hit rect{cursor:pointer;}
/* 번호 앞 색 막대 — 아우라가 은은해진 만큼, 그 행이 누구 것인지는 여기서 잡는다
   (PACE 표의 연도 앞 색 점과 같은 문법, 모양만 막대) */
.lb-n{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:-.5px;
  color:var(--text);line-height:1;display:flex;align-items:center;}
.lb-n::before{content:"";width:4px;height:17px;border-radius:2.5px;background:var(--lbc);
  flex-shrink:0;opacity:.92;margin-right:8px;}
.lb-n s{text-decoration:none;font-size:10.5px;color:var(--text3);margin-right:.5px;}
.lb-c{display:flex;align-items:baseline;gap:7px;min-width:0;font-family:var(--font-mono);line-height:1.2;}
.lb-c .y{font-size:12px;font-weight:700;letter-spacing:-.3px;}
.lb-c .d{font-size:11px;letter-spacing:-.4px;opacity:.72;}
.lb-c.second .y,.lb-c.second .d{opacity:.62;}
.lb-c .empty{font-size:11px;color:var(--text3);letter-spacing:2.5px;}
.lb-g{text-align:right;}
.lb-gap{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--lb-gap);
  white-space:nowrap;line-height:1;position:relative;top:-1px;}
.lb-gap i.v{font-style:normal;}
.lb-gap u{text-decoration:none;font-weight:400;font-size:9.5px;opacity:.8;margin-left:2px;}
.lb-gap.none{letter-spacing:1px;}
.lb-gap.tie{letter-spacing:1.5px;}

/* ── 가로 모드 — 좌: 차트 / 우: 표 (PACE 상세와 같은 문법) ── */
@media (orientation: landscape){
  #lbView{padding:0 env(safe-area-inset-right) calc(4px + env(safe-area-inset-bottom)) env(safe-area-inset-left);}
  #lbView .pace-view-head{position:absolute;top:6px;right:calc(10px + env(safe-area-inset-right));
    left:auto;padding:0;z-index:5;}
  #lbView .pace-view-title{display:none;}
  .lb-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr);
    grid-template-rows:auto minmax(0,1fr);gap:4px 10px;padding:6px 6px 0;overflow:hidden;}
  .lb-body > .lb-panes{grid-column:1;grid-row:1/3;min-width:0;align-self:center;}
  .lb-body > .lb-head{grid-column:2;grid-row:1;padding:34px 6px 5px;}
  .lb-body > .lb-scroll{grid-column:2;grid-row:2;padding:0 0 8px;min-height:0;}
}

@media (prefers-reduced-motion:reduce){
  .lb-b,.lb-p,.lb-bv,.lb-vl,.lb-ko,.lb-row,.lb-row::before,.lb-track{transition:none;}
  .lb-rank .lb-pop{animation:none;}
}

/* ── HALL OF FAME 탭 카드 ────────────────────────────────────────────
   요약이 아니라 안에 있는 차트 그대로 — PACE 카드가 순위 차트를 그대로 펴는 것과 같다.
   설명 문구는 두지 않는다: 축과 색이 이미 말한다. */
/* 상세에서도 맨 위 — 트랙 밖에 한 번만 두면 장을 넘겨도 자리를 지킨다.
   좌우 여백은 레인(.cn-lanewrap)과 같은 14px. */
.lb-sharetop{margin:2px 14px 10px;}
.lb-sharetop .lb-c-sw{margin:0;}
/* 보유 비율 — 한 줄 막대(.cn-share 문법) 유지. 연도가 항목으로 읽히게 하는 변형들. */
.lb-c-sw{margin:9px 0 2px;}
.lb-c-share{display:flex;height:16px;border-radius:8px;overflow:hidden;}
.lb-c-share i{display:flex;align-items:center;justify-content:center;min-width:0;transition:width .3s ease;}
.lb-c-share b{font-family:var(--font-mono);font-size:9px;font-weight:700;color:#fff;white-space:nowrap;
  display:flex;align-items:baseline;gap:4px;}
.lb-c-share u{text-decoration:none;font-size:8px;font-weight:400;opacity:.85;}
/* A — 구간 폭만큼의 캡션이 막대 밑에 선다. 연도가 자기 구간을 이고 있어 항목으로 읽힌다. */
.v-a .lb-c-share{height:11px;border-radius:6px;}
.lb-c-caps{display:flex;margin-top:5px;}
.lb-c-caps span{min-width:0;display:flex;align-items:baseline;gap:5px;padding-right:8px;
  font-family:var(--font-mono);white-space:nowrap;overflow:hidden;}
.lb-c-caps em{font-style:normal;font-size:11px;font-weight:700;}
.lb-c-caps b{font-size:12.5px;font-weight:700;}
.lb-c-caps u{text-decoration:none;font-size:9px;font-weight:400;opacity:.7;}
/* B — 색 점 + 연도 범례가 위에, 막대 안에는 수치만 */
.lb-c-leg{display:flex;gap:14px;padding:0 1px 5px;}
.lb-c-leg span{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);
  font-size:10.5px;font-weight:700;color:var(--vc);}
.lb-c-leg i{width:7px;height:7px;border-radius:2px;background:var(--vc);flex-shrink:0;}
/* C — 막대 안에서 연도만 알약으로 떼어낸다 */
.v-c .lb-c-share{height:19px;border-radius:10px;}
.v-c .lb-c-share em{font-style:normal;font-size:8px;font-weight:700;
  background:rgba(255,255,255,.24);border-radius:5px;padding:2px 5px;line-height:1;}
.v-c .lb-c-share b{font-size:11px;gap:5px;}
/* D — 연도는 막대 밖 양 끝 */
.lb-c-ends{display:flex;justify-content:space-between;padding:0 2px 4px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;}
/* 큰 대결 — PACE 상세의 듀얼과 같은 꼴 */
.lb-c-duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:9px 0 2px;}
.lb-c-duel .lb-d-side{display:flex;flex-direction:column;line-height:1;gap:3px;}
.lb-c-duel .lb-d-side.r{align-items:flex-end;}
.lb-c-duel em{font-style:normal;font-family:var(--font-mono);font-size:10px;font-weight:700;opacity:.85;}
.lb-c-duel b{font-family:var(--font-mono);font-size:26px;font-weight:700;line-height:1;}
.lb-c-duel .lb-d-vs{font-family:var(--font-mono);font-size:9px;color:var(--text3);letter-spacing:1px;}
/* 마일스톤 하나 = 구슬 하나. 스트릭 점(.streak-dot)과 같은 문법이되 가로를 다 쓴다 —
   칸을 1fr로 나누고 구슬을 그 안에 가운데 두면 카드 폭이 달라져도 균등하게 퍼진다.
   색은 기록을 가진 해, 진하기는 그때의 MARGIN(_streakDotOpacity, sqrt 0.18~1.0). */
/* 마일스톤 하나 = 네온 간판 하나. MOST WATCHED의 도장 스트립처럼 같은 크기 타일이
   줄지어 서되 일곱 개씩 — 21개가 세 줄에 딱 떨어져 남는 칸이 없다.
   가운데 #번호만 네온(Sacramento)이고 위아래 연도·날짜는 모노 잔글씨다 —
   도장의 각인과 같은 역할이라 읽히는 게 먼저다. */
.lb-c-beads{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:9px 0 2px;}
.lb-neon{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:0;
  /* min-width:0이 없으면 그리드 아이템이 내용 높이만큼 넓어지고(aspect-ratio가 폭을
     되계산한다) 일곱 칸이 카드를 넘어간다. 칸에 맞춰 눌러야 정사각이 유지된다. */
  aspect-ratio:1;min-width:0;overflow:hidden;
  padding:2.5px 0 3px;border-radius:9px;line-height:1;color:var(--nc);
  border:1px solid color-mix(in srgb,var(--nc) calc(var(--nl) * 74%),transparent);
  background:color-mix(in oklab,var(--nc) calc(var(--nl) * 9%),transparent);
  box-shadow:
    0 0 3px color-mix(in srgb,var(--nc) calc(var(--nl) * 20%),transparent),
    inset 0 0 4px color-mix(in srgb,var(--nc) calc(var(--nl) * 12%),transparent);
  /* 지이잉 — 관이 켜져 있는 소리. opacity만 움직이므로 합성으로 끝난다. */
  animation:lb-hum var(--hs,4s) ease-in-out infinite;animation-delay:var(--hd,0s);}
.lb-neon em{font-style:normal;font-family:var(--font-neon);font-size:16.2px;line-height:.88;
  /* 세 자리(#200)가 42.9px 타일에 딱 들어가는 한계 — 자간을 조금 죄어 그 크기를 지킨다 */
  letter-spacing:-.25px;
  text-shadow:
    0 0 2px color-mix(in srgb,var(--nc) calc(var(--nl) * 68%),transparent),
    0 0 5px color-mix(in srgb,var(--nc) calc(var(--nl) * 36%),transparent);}
/* 잔글씨는 모노 700이다. Sacramento는 굵기가 400 하나뿐이라 font-weight:700을 줘도
   가짜 볼드가 될 뿐이고, 7px 세필 스크립트에서는 눈에 띄는 차이가 없다(직접 비교해 확인).
   여기서 네온이어야 하는 건 #번호 하나고, 잔글씨는 읽히는 게 먼저다 —
   도장(.fl-st)이 각인을 모노로 쓰는 것과 같은 이유다.
   모노는 같은 px에서 훨씬 크게 읽히므로 7/8.4 자리에 5.6/6.4를 준다:
   또렷해지면서도 #번호(16.2)와의 격차는 오히려 벌어진다. */
.lb-neon i{font-style:normal;font-family:var(--font-mono);font-size:5.6px;font-weight:700;
  line-height:1;opacity:.82;letter-spacing:0;}
.lb-neon b{font-family:var(--font-mono);font-size:6.4px;font-weight:700;
  line-height:1;opacity:.9;letter-spacing:0;}
/* 형광등처럼 켜져 있다가 아주 가끔 한 번 흔들린다. 밑을 .84 아래로는 안 내려
   글자가 사라진 것처럼 보이지 않게 한다. */
@keyframes lb-hum{
  0%,100%{opacity:1;}
  38%{opacity:1;} 40%{opacity:.86;} 41.5%{opacity:1;}
  72%{opacity:1;} 73%{opacity:.9;} 74%{opacity:1;} 75.5%{opacity:.94;} 77%{opacity:1;}
}
/* 하나를 고르면 그 관만 켜 둔다 — 나머지는 꺼진 관처럼 어두워지고 지이잉도 멈춘다.
   아래 두 차트에서 같은 마일스톤이 짚이는 건 상세와 같은 .sel-on/.sel 규칙이 한다. */
.lb-neon{cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .2s ease,box-shadow .2s ease,background .2s ease;}
.lb-neon:active{transform:scale(.94);}
.lb-c-beads.has-sel .lb-neon:not(.is-sel){opacity:.26;animation:none;box-shadow:none;}
.lb-neon.is-sel{animation:none;
  border-color:color-mix(in srgb,var(--nc) 92%,transparent);
  background:color-mix(in oklab,var(--nc) 17%,transparent);
  box-shadow:0 0 7px color-mix(in srgb,var(--nc) 46%,transparent),
    inset 0 0 7px color-mix(in srgb,var(--nc) 22%,transparent);}
.lb-neon.is-sel em{text-shadow:0 0 3px var(--nc),0 0 8px color-mix(in srgb,var(--nc) 55%,transparent);}
.lb-neon.is-sel i,.lb-neon.is-sel b{opacity:.95;}
@media (prefers-reduced-motion:reduce){.lb-neon{animation:none;}}
/* 구분선은 MARGIN 위에 한 번만 — 숫자·구슬(요약)과 차트를 가른다.
   MARGIN과 LEAD는 같은 판의 두 시선이라 사이를 끊지 않는다. */
.lb-c-lane{margin-top:9px;}
.lb-c-lane--top{margin-top:11px;padding-top:10px;border-top:1px solid var(--border);}
.lb-c-lh{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:1.5px;
  color:var(--text3);padding:0 1px 2px;}
.lb-c-lane svg{display:block;width:100%;height:auto;}