/* ═══════════════════════════════════════════════════════════════
   HALL OF FAME — 전체화면 뷰 (views-hof.js)
   색 규칙: 게이지·숫자·퍼센트는 '현재 등급' 한 색으로 묶인다.
   필터 없음 = 연두 · ★★★★★ = 금색 · ★★★★½ = 은색.
   라이트 모드는 같은 색을 한 단 깊게(--tcL) 쓴다 — 원색은 흰 배경에서 날아간다.
   ═══════════════════════════════════════════════════════════════ */
/* 전체화면이지만 '오버레이'가 아니라 문서 자체를 갈아끼운다.
   내부 스크롤 컨테이너(overflow:auto)로 만들면 iOS의 상태바 탭 → 맨 위로가
   안 먹는다(그 제스처는 문서 스크롤러만 찾는다). 그래서 열릴 때 앱 셸을
   숨기고 이 섹션이 문서 흐름을 차지하게 한다. */
/* ── 무거운 카드는 첫 화면 뒤 조용한 프레임에 하나씩 준비한다 ────────────────
   상태바 탭은 3000px을 0.5초에 훑는다. auto인 카드를 그 속도로 다시 깨우면 빈 카드가
   먼저 지나가고 실제 높이 보정이 스크롤을 되감는다. 화면 1100px 앞의 카드는 즉시,
   나머지는 idle 프레임마다 하나씩 준비하고 .cv-ready로 유지해 첫 복귀부터 즉시 그린다.
   (년도 탭은 카드를 조금씩 이어붙여 짧고 가벼워서 이 경로가 필요 없다.)
   대상은 재는 코드가 안 붙은 무거운 카드들 — 도장판(회전 95개)·MW FILMS·차트 3종.
   히어로 카드(.hof-feature-box)는 제외한다: 화면 밖에서 크기를 재면 0이 나와
   제목 맞춤이 어긋난다.
   contain-intrinsic-size의 auto는 '한 번 그린 실제 크기를 기억하라'는 뜻이라,
   처음 한 번만 어림값(500px)을 쓰고 그다음부터는 진짜 높이로 자리를 잡는다. */
.sbox.md-box,
.sbox.fl-box,
.sbox[data-trend="cinemas"],
.sbox[data-trend="brands"],
.sbox[data-trend="formats"]{content-visibility:auto;}
.sbox.md-box.cv-ready,
.sbox.fl-box.cv-ready,
.sbox[data-trend="cinemas"].cv-ready,
.sbox[data-trend="brands"].cv-ready,
.sbox[data-trend="formats"].cv-ready{
  content-visibility:visible;contain:layout style paint;
}
/* 어림값은 실제 높이에 맞춰 둔다 — 처음 한 번 그리기 전까지만 쓰이지만,
   많이 틀리면 그 순간 문서 높이가 출렁인다 (실측: 740 / 476 / 549 / 370 / 348) */
.sbox.md-box{contain-intrinsic-size:auto 740px;}
.sbox.fl-box{contain-intrinsic-size:auto 476px;}
.sbox[data-trend="cinemas"]{contain-intrinsic-size:auto 549px;}
.sbox[data-trend="brands"]{contain-intrinsic-size:auto 370px;}
.sbox[data-trend="formats"]{contain-intrinsic-size:auto 348px;}

/* ── MILESTONES ────────────────────────────────────────────────────
   100편마다의 이정표. 카드는 원장(조밀), 전체화면은 구슬 타임라인.
   색은 전부 앱에 이미 있던 규칙 — 번호=탭 색, 날짜=그 해 도장 색(_flYearColor),
   간격=최단 빨강/최장 파랑, 별점=starClass. */
.ms-box{padding:0;}
.ms-hero .hof-feature-htr{align-items:flex-start;}
/* 번호는 크게, 날짜는 번호 폭에 맞춰 JS가 크기를 정한다(_msFitStat).
   letter-spacing을 em으로 둬야 크기를 바꿔도 폭이 비례로 따라온다. */
.ms-stat b{font-size:26px !important;letter-spacing:0 !important;}
.ms-stat b i{font-style:normal;font-size:12px;vertical-align:6px;opacity:.75;}
.ms-stat em{font-size:9px !important;letter-spacing:.1em !important;
  font-family:var(--font-mono) !important;opacity:.92;}
.ms-ttl{display:flex;align-items:center;gap:0;min-width:0;}
.ms-gear,.ms-x{border:none;background:none;padding:2px 0 2px 8px;cursor:pointer;
  color:rgba(255,255,255,.86);text-shadow:0 1px 7px rgba(0,0,0,.72);
  display:flex;align-items:center;}
.ms-gear{padding:6px 7px;margin-left:-9px;}
.ms-gear .md-gi{width:15px;height:15px;display:block;}
.ms-x{font-size:15px;line-height:1;}

/* JS가 제목 위치를 재서 다시 잡는다(_msFitHeroes) — 이 값은 그 전 한 프레임용 */
.ms-hero .hof-feature-meta{bottom:66px;}
.ms-list{padding:4px 15px 10px;}
.ms-row{display:grid;grid-template-columns:36px 1fr;gap:12px;
  padding:10px 0 8px;border-top:1px solid var(--border);cursor:pointer;}
.ms-row:first-child{border-top:none;}
.ms-poster{width:36px;height:54px;object-fit:cover;border-radius:3px;display:block;
  background:var(--tag-bg);}
/* 아직 안 넣은 칸도 또렷하게 — 연하면 있는지 없는지 헷갈린다 */
.ms-ph{background:var(--card-hover);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text3);}
.ms-head{display:flex;align-items:baseline;gap:8px;font-family:var(--font-mono);}
.ms-n{font-size:13px;font-weight:700;color:var(--hof-mint);line-height:1;letter-spacing:-.2px;}
.ms-n i{font-style:normal;font-size:8px;vertical-align:3px;opacity:.65;}
.ms-rule{flex:1;height:1px;background:var(--border);transform:translateY(-3px);min-width:6px;}
.ms-date{font-size:10px;font-weight:700;letter-spacing:.2px;}
/* 간격 색은 최단(주홍)~최장(파랑) 척도다 — 색만 봐도 어느 쪽에 가까운지 읽힌다.
   두 값을 style로 받아(--gc 라이트 · --gcd 다크) 테마가 바뀌어도 다시 안 그린다. */
.ms-gap{font-size:9.5px;color:var(--gc,var(--text3));min-width:32px;text-align:right;}
.ms-gap.is-min,.ms-gap.is-max{font-weight:700;}   /* 양 끝만 굵게 */
[data-theme="dark"] .ms-gap{color:var(--gcd,var(--text3));}
@media(prefers-color-scheme:dark){[data-theme="system"] .ms-gap{color:var(--gcd,var(--text3));}}
/* 제목·감독은 …으로 자르지 않는다 — 칸을 넘으면 접고 줄 높이가 는다 */
.ms-title{font-family:var(--font-display);font-size:16px;letter-spacing:1px;line-height:1.02;
  color:var(--text);margin-top:5px;overflow-wrap:anywhere;}
.ms-meta{font-family:var(--font-mono);font-size:9.5px;line-height:1.45;color:var(--text3);
  margin-top:5px;overflow-wrap:anywhere;}
.ms-meta b{color:var(--text2);font-weight:400;}
.ms-st{font-size:12px;font-weight:700;letter-spacing:.5px;vertical-align:-1px;}
/* 다음 이정표까지 — 추정 그래프.
   가로는 카드 폭에 맞춰 늘어나고 세로는 비율대로 따라온다(viewBox 360×116).
   그래프 안 글자는 전부 모노 — 고정폭이라 칸을 채워 맞추면 위아래 줄이 정확히 선다. */
.ms-chart{padding:0 0 10px;}
.ms-chart svg{display:block;width:100%;height:auto;overflow:visible;}
.ms-chart text{font-family:var(--font-mono);}
/* NOW 구슬의 후광이 숨을 쉰다 — 스트릭 점(.streak-dot--current)과 같은 뜻, 같은 주기.
   깜빡이는 게 아니라 2.4초에 걸쳐 천천히 부풀었다 돌아온다. 이 지점이 '오늘'이고,
   오른쪽 절반(예상)이 매일 움직인다는 표시이기도 하다. */
.ms-chart circle.ms-now{transform-box:fill-box;transform-origin:center;
  animation:ms-now-pulse 2.4s ease-in-out infinite;}
@keyframes ms-now-pulse{
  0%,100%{transform:scale(1);opacity:.16;}
  50%    {transform:scale(1.35);opacity:.30;}
}
@media (prefers-reduced-motion:reduce){.ms-chart circle.ms-now{animation:none;}}
/* 예상 간격(1000→1100) — 목록의 간격과 같은 척도, 같은 두 색을 style로 받는다 */
.ms-chart text.ms-cgap{fill:var(--gc,var(--text3));}
[data-theme="dark"] .ms-chart text.ms-cgap{fill:var(--gcd,var(--text3));}
@media(prefers-color-scheme:dark){[data-theme="system"] .ms-chart text.ms-cgap{fill:var(--gcd,var(--text3));}}

/* 아직 안 온 이정표 — 100편을 못 채운 초기에만 */
.ms-next{display:block;border-top:none;padding:6px 0 12px;cursor:default;}
.ms-next .ms-n{color:var(--text3);opacity:.75;}
.ms-next .ms-rule{border-top:1px dashed var(--border);background:none;height:0;}
.ms-togo{font-family:var(--font-mono);font-size:9px;color:var(--text3);
  letter-spacing:.2px;white-space:nowrap;}
.ms-togo b{color:var(--hof-mint);font-weight:700;}
.ms-togo .sep{opacity:.55;margin:0 4px;}

/* 전체화면 — 히어로는 카드 것 그대로, 밑은 구슬 타임라인.
   머리 띠를 따로 두지 않는다: MILESTONES와 ✕가 스틸 안에 있다. */
.ms-view{display:none;}
body.ms-open{padding-top:0;padding-bottom:0;}
body.ms-open > .header,
body.ms-open > .gauge-strip,
body.ms-open > main,
body.ms-open > .safe-cap,
body.ms-open > .app-footer{display:none;}
/* 이 화면은 다크에서도 라이트로 간다 — 검은 바탕에 해마다의 색을 덮으면
   진흙색이 된다(2023 주황→갈색, 2019 빨강→마른 핏빛). 틴트가 제 색으로
   읽히는 건 옅은 종이 위뿐이라, 팔레트째로 갈아끼운다.
   히어로 위 글자·닫기는 원래 사진 위 흰색이라 그대로다. */
/* 고정 오버레이가 아니라 문서 흐름 — 그래야 상태바 탭이 닿는다(.docview와 같은 이유) */
body.ms-open > .ms-view{display:block;background:var(--bg);min-height:100dvh;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));}
/* 전체화면 히어로는 MOST WATCHED FILMS 상세와 같은 규칙 — 16:9에 안전영역을 더해
   스틸이 화면 맨 위(노치 뒤)까지 올라가고, 글자 줄만 그 밑으로 내려온다.
   카드 안 히어로(16:9 딱)보다 안전영역만큼 더 높다. */
.ms-view .ms-hero{aspect-ratio:auto;height:calc(56.25vw + env(safe-area-inset-top));
  min-height:200px;border-radius:0;}
.ms-view .hof-feature-htr{top:calc(9px + env(safe-area-inset-top));left:15px;right:11px;}
.ms-view .hof-feature-meta{left:15px;right:15px;}
.ms-view .hof-feature-foot{left:15px;right:15px;bottom:13px;}

.msv-body{padding:18px 14px 24px;}
.msv-st{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;cursor:pointer;}
.msv-pos{position:relative;}
.msv-pos img,.msv-ph{width:56px;height:84px;border-radius:4px;display:block;object-fit:cover;
  box-shadow:0 3px 12px rgba(0,0,0,.22);}
.msv-ph{background:var(--card-hover);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--text3);}
.msv-pos b{position:absolute;left:-5px;top:-8px;font-family:var(--font-mono);font-size:10px;
  font-weight:700;background:var(--hof-mint);color:#08110f;border-radius:9px;padding:2.5px 6px;
  letter-spacing:.2px;box-shadow:0 2px 7px rgba(0,0,0,.28);}
.msv-pos b i{font-style:normal;font-size:7px;opacity:.7;}
.msv-t{font-family:var(--font-display);font-size:20px;letter-spacing:1.1px;line-height:1;
  color:var(--text);margin-top:3px;overflow-wrap:anywhere;}
.msv-m{font-family:var(--font-mono);font-size:9.5px;line-height:1.7;color:var(--text3);
  margin-top:7px;overflow-wrap:anywhere;}
.msv-m b{color:var(--text2);font-weight:400;}
.msv-m .dt{font-weight:700;}
/* 두 구슬 사이 실 — 길이가 실제로 걸린 날수고, 색은 위아래 두 해의 색이 섞여 흐른다.
   섞이는 지점은 그 사이의 진짜 1월 1일이다(_msYearMarks). */
/* 흐림은 실과 날수 라벨에만 준다 — 요소 전체에 opacity를 걸면 연도 글자까지
   물려받아 안 읽힌다(실측 대비 RGB 16). 실 색은 알파를 색에 직접 넣는다. */
.msv-link{margin-left:27px;width:2px;border-radius:2px;position:relative;z-index:1;}
.msv-link span{position:absolute;left:21px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:9px;color:var(--text2);white-space:nowrap;letter-spacing:.2px;}
.msv-link span b{font-weight:700;font-size:10px;color:var(--gc,var(--text2));}
.msv-link span em{font-style:normal;color:var(--text3);margin-left:3px;opacity:.55;}
[data-theme="dark"] .msv-link span b{color:var(--gcd,var(--text2));}
@media(prefers-color-scheme:dark){[data-theme="system"] .msv-link span b{color:var(--gcd,var(--text2));}}
/* 해가 바뀌는 자리 — 오른쪽 끝에만 짧은 절취선, 위가 새 해 아래가 지난 해.
   폭은 화면 기준으로 잡는다(실 왼끝 41px + 오른 여백 14px). */
.msv-cut{position:absolute;left:1px;width:calc(100vw - 56px);height:1px;margin-top:-.5px;
  font-style:normal;   /* <i>의 기본 기울임이 연도까지 내려온다 */
  background-image:repeating-linear-gradient(90deg,var(--yc) 0 2px,transparent 2px 5px);
  background-repeat:no-repeat;background-position:right center;background-size:28px 1px;}
.msv-cut u{position:absolute;right:0;bottom:3px;text-decoration:none;
  font-family:var(--font-mono);font-size:7.5px;font-weight:700;letter-spacing:.4px;}
.msv-cut u.dn{bottom:auto;top:3px;}
/* 해마다의 아주 옅은 바탕 — 경계에서 스르륵 넘어간다(칠하는 건 _msPaintYearBg) */
.msv-body{position:relative;}
/* 높이는 _msPaintYearBg가 잡는다 — 목록 아래 남는 자리까지 마지막 해 색으로 덮는다 */
.msv-bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;}
.msv-body > .msv-st{position:relative;z-index:1;}

.hof-view{display:none;}
/* body의 아래 패딩은 메인 화면 푸터 자리다 — HOF에선 푸터를 숨기므로 죽은 공간이 된다.
   하단 여백은 .hof-view가 안전영역까지 포함해 직접 책임진다. */
body.hof-open{padding-top:0;padding-bottom:0;}
body.hof-open > .header,
body.hof-open > .gauge-strip,
body.hof-open > main,
body.hof-open > .app-footer{display:none;}
/* 헤더가 fixed라 그 높이만큼 위를 비워 준다 (메인의 body padding-top과 같은 역할) */
body.hof-open > .hof-view{display:block;
  padding-top:calc(54px + env(safe-area-inset-top));
  padding-bottom:calc(20px + env(safe-area-inset-bottom));}
/* HOF의 기록 상세에서 감독·영화 컬렉션으로 들어가면 docview가 앞 문서가 된다.
   hof-open 상태는 뒤로 돌아올 때를 위해 유지하되, 그동안 고정 헤더까지 함께 숨긴다. */
body.hof-open.docview > .hof-view{display:none;}
/* 메인 화면 .header와 같은 방식 — sticky가 아니라 fixed다.
   sticky는 문서 끝을 넘겨 당기는 고무줄 구간에서 WebKit이 화면 밖으로 밀어내
   제목·버튼이 통째로 사라졌다. fixed는 뷰포트에 직접 붙어 오버스크롤과 무관하다.
   높이를 못 박고(가장 큰 자식인 ✕ 38px + 상하 8px = 54px) 그만큼을
   .hof-view의 위 패딩으로 돌려준다. */
#hofView .pace-view-head{position:fixed;top:0;left:0;right:0;z-index:20;background:var(--bg);
  display:flex;align-items:center;gap:7px;
  height:calc(54px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 14px 0;}
/* 제목·버튼 크기는 두 화면이 같다. Films도 Directors 쪽 작은 크기로 맞췄다 —
   스팟 버튼이 NOT LOGGED일 때 59 → 104px로 커지면서 헤더 합계가 402px(화면 폭)에
   딱 차서 'HALL OF FAME · FILMS'가 두 줄로 접혔다. */
#hofView .pace-view-head{gap:5px;padding-left:10px;padding-right:10px;}
#hofView .pace-view-title{font-size:10.5px;letter-spacing:1.6px;white-space:nowrap;
  color:var(--text3);font-family:var(--font-display);}
#hofView .hof-layout,
#hofView .hof-density,
#hofView .hof-sort,
#hofView .hof-sort-dir,
#hofView .hof-spot{padding:6px 8px;font-size:9px;}
/* 두 화면이 각자 자리를 갖고, 보여줄 쪽만 켠다 */
#hofView:not(.is-directors) > #hofDirBody{display:none;}
#hofView.is-directors > #hofBody{display:none;}
/* Directors는 5열 고정이라 밀도 버튼이 없다. 인접 선택자는 display:none인 형제도
   그대로 매칭하므로, 오른쪽으로 미는 margin-left:auto를 정렬 버튼에 되돌려 준다. */
#hofView.is-directors .hof-density{display:none;}
#hofView.is-directors .hof-layout{display:none;}
#hofView.is-directors .hof-sort-dir{display:none;}
#hofView.is-directors .hof-density + .hof-sort{margin-left:auto;}
#hofView.is-list .hof-density{display:none;}

/* 헤드 버튼 — 격자↔목록 / 포스터 밀도 / 정렬 / 강조 스위치 */
.hof-layout{margin-left:auto;width:29px;min-width:29px;height:29px;padding:0 !important;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;
  background:transparent;color:var(--text2);font-family:var(--font-mono);font-size:17px !important;
  line-height:1;cursor:pointer;transition:background .16s,border-color .16s,color .16s,box-shadow .2s;}
.hof-layout.is-list{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 20%,transparent);}
.hof-layout + .hof-density{margin-left:0;}
.hof-density{margin-left:auto;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2px;padding:7px 8px;
  border:1px solid var(--border);border-radius:15px;background:transparent;color:var(--text2);cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,box-shadow .2s;}
.hof-density.is-dense{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 22%,transparent);}
.hof-density + .hof-sort{margin-left:0;}
.hof-sort{margin-left:auto;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.3px;padding:7px 11px;
  border:1px solid var(--border);border-radius:15px;background:transparent;color:var(--text2);cursor:pointer;}
.hof-sort:active{border-color:var(--accent);color:var(--accent);}
.hof-sort em{font-style:normal;font-size:11px;line-height:1;}
.hof-sort-dir{width:29px;min-width:29px;height:29px;padding:0 !important;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--border);border-radius:50%;background:transparent;
  color:var(--text2);font-family:var(--font-mono);font-size:12px !important;line-height:1;cursor:pointer;}
.hof-sort-dir:active{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  box-shadow:0 0 9px color-mix(in srgb,var(--accent) 18%,transparent);}
/* 기본(ALL)도 '켜져 있는' 모양이다 — 다만 색이 없는 무채색 발광.
   OFF만 지금까지의 ALL처럼 꺼진 모양(윤곽선만)으로 남는다. */
.hof-spot{display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.4px;padding:7px 12px;
  border:1px solid color-mix(in srgb, var(--text) 45%, transparent);border-radius:15px;
  background:color-mix(in srgb, var(--text) 9%, transparent);color:var(--text);cursor:pointer;
  box-shadow:0 0 12px color-mix(in srgb, var(--text) 16%, transparent);
  transition:background .16s,border-color .16s,color .16s,box-shadow .2s;}
.hof-spot .dot{width:7px;height:7px;border-radius:50%;background:var(--text2);
  box-shadow:0 0 6px color-mix(in srgb, var(--text) 45%, transparent);
  transition:background .2s,box-shadow .2s;}
.hof-spot.is-off{background:transparent;border-color:var(--border);color:var(--text3);box-shadow:none;}
.hof-spot.is-off .dot{background:var(--text3);box-shadow:none;}
.hof-spot.is-seen{--sc:var(--green);} .hof-spot.is-left{--sc:var(--red);}
.hof-spot.is-seen,.hof-spot.is-left{
  border-color:color-mix(in srgb, var(--sc) 76%, transparent);
  background:color-mix(in srgb, var(--sc) 18%, transparent);
  color:color-mix(in srgb, var(--sc) 78%, #fff);
  box-shadow:0 0 14px color-mix(in srgb, var(--sc) 34%, transparent);
  text-shadow:0 0 9px color-mix(in srgb, var(--sc) 55%, transparent);}
.hof-spot.is-seen .dot,.hof-spot.is-left .dot{background:var(--sc);box-shadow:0 0 7px var(--sc);}

/* 히어로 — 175 / 286 …… 61% */
.hof-hero{display:flex;align-items:baseline;gap:9px;padding:6px 16px 0;}
/* 별점 필터를 누르면 --tc가 초록↔금↔은으로 갈린다. 여기서 파생된 색들이 각자 전환을
   타고 따라오도록 색 전환을 걸어 둔다 — 값 갈아 끼우기는 _hofRefresh가 한다. */
.hof-hero-n{font-family:var(--font-mono);font-size:34px;line-height:1;letter-spacing:-1.5px;color:var(--tc);
  transition:color .45s ease;}
.hof-hero-of{font-family:var(--font-mono);font-size:13px;color:var(--text3);}
.hof-hero-pct{margin-left:auto;font-family:var(--font-mono);font-size:17px;line-height:1;color:var(--tc);
  transition:color .45s ease;}
.hof-hero-pct i{font-style:normal;font-size:11px;opacity:.72;margin-left:1px;}

/* 게이지 — 끝이 둥글게 차고, 트랙은 같은 색 옅은 톤으로 끝까지 이어진다 */
.hof-gauge{position:relative;height:6px;margin:12px 16px 0;}
.hof-gauge-trk{position:absolute;inset:0;border-radius:3px;background:color-mix(in srgb, var(--tc) 17%, transparent);
  transition:background-color .45s ease;}
/* 폭은 색보다 조금 길게 — 색이 먼저 자리를 잡고 게이지가 뒤이어 차오른다 */
.hof-gauge-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--tc);
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--tc) 40%, transparent));
  transition:width .55s cubic-bezier(.22,.61,.36,1),background-color .45s ease,filter .45s ease;}

/* 게이지 바로 밑 등급 구성 한 줄 — ★★★★★ 76 · ★★★★½ 210 */
.hof-sum{display:flex;align-items:center;gap:12px;margin:8px 16px 0;
  font-family:var(--font-mono);font-size:9.5px;color:var(--text3);}
.hof-sum span{display:flex;align-items:center;gap:5px;}
.hof-sum .s{font-style:normal;font-size:10px;letter-spacing:.4px;}
.hof-sum .five .s{color:#D4AF37;} .hof-sum .half .s{color:#969CA8;}
/* 숫자는 Directors의 별점 요약과 같은 굵기로 — 별 글리프에 묻히지 않게 */
.hof-sum b{font-weight:600;}
.hof-sum .five b{color:#D4AF37;}
.hof-sum .half b{color:#969CA8;}
[data-theme="light"] .hof-sum{color:#6a6a6a;}
[data-theme="light"] .hof-sum .five .s{color:#9a7a1c;}
[data-theme="light"] .hof-sum .half .s{color:#6d747f;}
[data-theme="light"] .hof-sum .five b{color:#9a7a1c;}
[data-theme="light"] .hof-sum .half b{color:#6d747f;}

/* 스카이라인 — 막대 하나 = 그 연대 편수(본 것/남은 것으로 안 나눔). 막대 = 연대 필터 */
/* 높이를 고정한다 — 안 그러면 컨테이너 높이가 '가장 높은 막대'를 따라다녀서,
   막대가 0에서 차오르는 동안 아래 축·버튼·포스터가 통째로 밀려 내려간다.
   막대 최댓값은 늘 76px(h = n/max*76)이라 이 합은 항상 맞는다:
   9(숫자) + 3 + 6.5(분해 라벨) + 3 + 76(막대) = 97.5px */
.hof-sky{display:flex;align-items:flex-end;gap:3px;margin:16px 16px 0;height:97.5px;}
.hof-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;
  padding:0 1.5px;margin:0 -1.5px;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.hof-col b{font-family:var(--font-mono);font-weight:600;font-size:9px;line-height:1;color:var(--text2);}
.hof-col em{font-style:normal;font-family:var(--font-mono);font-size:6.5px;line-height:1;color:var(--text3);}
/* 자리만 지키고 안 보이는 분해 라벨 — 별점 필터를 눌러도 스카이라인 높이가 안 변한다 */
.hof-col em.is-ghost{visibility:hidden;}
/* 높이는 게이지와 같은 이징으로 — 막대마다 transition-delay를 조금씩 줘서
   왼쪽부터 차례로 차오르게 한다(_hofRefresh가 16ms씩 밀어 준다) */
.hof-col i{width:100%;display:block;border-radius:2.5px 2.5px 0 0;background:var(--bc);
  transition:height .5s cubic-bezier(.22,.61,.36,1),box-shadow .25s,opacity .2s;}
.hof-col.is-off i{opacity:.3;}
.hof-col.is-off b,.hof-col.is-off em{opacity:.4;}
.hof-col.is-sel i{box-shadow:0 0 11px color-mix(in srgb, var(--bc) 65%, transparent),
                             0 0 3px color-mix(in srgb, var(--bc) 45%, transparent);}
.hof-col.is-sel b{color:var(--bc);}
.hof-sky-ax{display:flex;gap:3px;margin:6px 16px 0;}
.hof-sky-ax span{flex:1;min-width:0;text-align:center;font-family:var(--font-mono);
  font-size:9px;letter-spacing:-.4px;color:var(--text2);}
.hof-sky-ax span.is-sel{color:var(--text);}

/* 별점 버튼 — 큰 버튼 두 개 */
.hof-stars{display:flex;gap:8px;margin:14px 16px 0;}
.hof-star{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 0;
  border:1px solid var(--border);border-radius:11px;background:transparent;cursor:pointer;
  font-family:var(--font-mono);font-size:10.5px;color:var(--text2);transition:border-color .15s,background .15s,box-shadow .2s;}
.hof-star .s{font-size:15px;letter-spacing:1.2px;margin-right:-1.2px;line-height:1;}
.hof-star .n{color:var(--text2);font-size:11px;}
.hof-star.five .s{color:#D4AF37;} .hof-star.half .s{color:#969CA8;}
.hof-star.five.is-on{border-color:#D4AF37;background:rgba(212,175,55,.10);
  box-shadow:0 0 14px rgba(212,175,55,.30), inset 0 0 12px rgba(212,175,55,.10);}
.hof-star.half.is-on{border-color:#969CA8;background:rgba(150,156,168,.12);
  box-shadow:0 0 14px rgba(150,156,168,.30), inset 0 0 12px rgba(150,156,168,.10);}
.hof-star.is-on .n{color:var(--text);}

/* 상태 줄 */
/* 이 줄은 필터를 누를 때 '내용이 바뀌는 유일한 줄'이다 — 글자가 289 films에서
   ★★★★★ — 76편으로 갈리고(별·한글은 모노 폰트에 없어 대체 폰트로 떨어진다),
   ✕ 전체 버튼이 생겼다 사라진다. 그 둘 중 하나라도 줄 높이를 건드리면 아래 포스터가
   통째로 오르내린다. min-height로는 '넘치면 커지는' 여지가 남아서(기기마다 대체 폰트의
   줄상자 높이가 다르다) 아예 높이를 못박고, 안쪽 글자의 line-height까지 고정한다.
   긴 라벨(별점+연대 여러 개)이 두 줄로 접히는 것도 같은 사고라 …으로 자른다. */
.hof-status{display:flex;align-items:center;gap:8px;padding:11px 16px 0;height:35px;
  box-sizing:border-box;font-family:var(--font-mono);font-size:9.5px;color:var(--text3);
  letter-spacing:.3px;}
.hof-status > span{min-width:0;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hof-clear{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:9.5px;
  line-height:1;height:19px;padding:0 9px;white-space:nowrap;
  border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text2);cursor:pointer;}

/* 그리드 — 기본 5열, 헤더 버튼으로 4·5·6열. 테두리는 항상 있다(초록=기록됨 / 빨강=미기록).
   강조 모드는 테두리를 지우는 게 아니라 반대쪽을 눌러 죽인다. */
/* 아래 패딩 10px — 뷰의 20px과 합쳐 마지막 포스터 밑이 30px이 된다(Directors와 같은 값) */
.hof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;padding:13px 16px 10px;
  transition:opacity .22s ease;}
.hof-grid.is-five{grid-template-columns:repeat(5,1fr);gap:9px 5px;padding-left:12px;padding-right:12px;}
.hof-grid.is-five .hof-cd{border-width:1.5px;border-radius:4px;}
/* 5열 캡션 — 가장 넓은 조합(★★★★★·1924)이 375pt에서도 2.6px 남는 선까지 키운 값.
   더 올리면 좁은 아이폰에서 옆 칸을 넘본다. */
.hof-grid.is-five .hof-ft{font-size:6.8px;gap:1px;}
.hof-grid.is-five .hof-ft > :first-child{font-size:7.8px;letter-spacing:-.1px;}
.hof-grid:not(.is-five):not(.is-dense) .hof-ft > :first-child{font-size:8.8px;letter-spacing:.15px;}
.hof-grid.is-dense{grid-template-columns:repeat(6,1fr);gap:9px 4px;padding-left:10px;padding-right:10px;}
.hof-grid.is-dense .hof-cd{border-width:1.5px;border-radius:4px;}
.hof-grid.is-dense .hof-ft{font-size:9px;gap:0;}
.hof-grid.is-dense .hof-ft > :first-child{letter-spacing:.35px;transform:scaleX(1.08);}
.hof-grid.is-dense .hof-dot,
.hof-grid.is-dense .hof-yr{display:none;}
.hof-it{display:flex;flex-direction:column;gap:4px;min-width:0;}
/* 열 수가 바뀔 때 포스터가 새 자리로 미끄러져 들어간다 (FLIP — views-hof.js가 잠깐만 붙인다) */
.hof-it.hof-flip{transition:transform .24s cubic-bezier(.22,.61,.36,1);will-change:transform;}
.hof-cd{position:relative;border-radius:5px;border:2px solid transparent;aspect-ratio:2/3;
  background:var(--bg2);overflow:hidden;cursor:pointer;
  transition:border-color .25s,box-shadow .25s;}
/* 캐시된 포스터도 디코딩 순간이 있어 '팟' 하고 나타난다 — 짧은 페이드로 덮는다 */
.hof-cd img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .18s ease, filter .25s;}
.hof-cd img.is-loaded{opacity:1;}
/* 이 페이드는 '방금 받아온 포스터가 팟 하고 나타나는 것'을 덮으려고 있는 것이지,
   이미 떠 있던 화면을 다시 보여줄 때 쓰라고 있는 게 아니다. display:none이던 컨테이너가
   켜지는 순간에는 전환이 0에서 다시 시작돼 이미 로드된 포스터까지 통째로 비어 보였다
   (열고 30ms 시점에 보이는 21장 중 20장이 opacity:0). 켜지는 첫 프레임에만 전환을 끈다. */
#hofView.is-showing .hof-cd img{transition:none;}
.hof-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--text3);}
.hof-ft{display:flex;align-items:center;justify-content:center;gap:3px;font-size:8px;line-height:1;
  white-space:nowrap;transition:opacity .25s;}
.hof-gold{color:#D4AF37;} .hof-silv{color:#969CA8;}
.hof-dot{color:#9e9e9e;font-weight:700;}
.hof-yr{color:var(--text);opacity:.85;font-weight:600;font-variant-numeric:tabular-nums;}

/* ── Films 목록 — 감독 상세 FILMOGRAPHY의 세 줄 문법을 세로 포스터에 맞춘 판 ── */
.hof-list{display:flex;flex-direction:column;gap:3px;padding:8px 14px 12px 10px;}
.hof-list-group{display:flex;flex-direction:column;gap:3px;}
.hof-list-row{display:flex;align-items:center;gap:9px;min-height:61px;padding:4px 5px;border-radius:9px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .16s,opacity .2s;
  contain:layout style;}
.hof-list-row:active{background:var(--card-hover);}
.hof-list-poster{position:relative;width:34px;height:51px;flex:0 0 auto;border:1.5px solid transparent;
  border-radius:4px;overflow:hidden;background:var(--bg2);transition:border-color .25s,box-shadow .25s;}
.hof-list-poster img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;
  transition:filter .25s;}
.hof-list-poster img.is-loaded{opacity:1;}
#hofView.is-showing .hof-list-poster img{transition:none;}
.hof-list-poster .hof-noimg{font-size:11px;}
.hof-list-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;}
.hof-list-title{display:flex;align-items:center;gap:6px;min-width:0;line-height:15px;}
.hof-list-title .sx-lane{flex:0 1 auto;}
.hof-list-title .sx-lane > i{font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:-.25px;}
.hof-list-title em{font-style:normal;font-size:8.5px;letter-spacing:.15px;white-space:nowrap;flex:0 0 auto;}
.hof-list-meta{display:flex;align-items:baseline;gap:5px;min-width:0;font-size:10.5px;line-height:14px;color:var(--text2);}
/* 감독명이 짧으면 연도가 바로 옆에 붙고, 넘칠 때만 연도가 오른쪽 끝에 안착하며
   감독명이 왕복한다. 제목도 넘치면 같은 방식으로 왕복한다. */
.hof-list-dir{min-width:0;overflow:hidden;flex:0 1 auto;}
.hof-list-dir > i{display:inline-block;font-style:normal;white-space:nowrap;will-change:auto;}
.hof-list-title .sx-lane > i{will-change:auto;}
.hof-list-meta u{text-decoration:none;font-family:var(--font-mono);font-size:9.5px;font-weight:600;line-height:1;
  color:var(--text3);flex:0 0 auto;}
@media(prefers-reduced-motion:reduce){
  .hof-list-dir > i{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
  .hof-list-title .sx-lane > i{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
}
.hof-list-chips{display:flex;align-items:center;gap:3px;flex-wrap:wrap;min-height:11px;}
.hof-list-chips i{display:block;flex:0 0 auto;background:var(--sc);color:var(--sk,#fff);border-radius:3px;
  padding:2px 3.5px 2px 2.5px;font-family:var(--font-mono);font-size:7.5px;font-weight:700;
  line-height:1;letter-spacing:-.2px;font-style:normal;}
.hof-list-count{min-width:19px;flex:0 0 auto;text-align:right;font-family:var(--font-mono);
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}
/* 1은 회색, 0은 같은 좁밥 계열에서 한 단계 더 힘을 뺀다. 숫자는 남기되 순위로 읽히지 않는다. */
.hof-list-count.is-zero{opacity:.34;font-weight:600;}

/* 기존 초록/빨강·스포트라이트 문법도 포스터 한 장 안에 그대로 이어진다. */
.hof-list-row.is-seen .hof-list-poster{border-color:var(--hlg);box-shadow:var(--glow-g);}
.hof-list-row.is-unseen .hof-list-poster{border-color:var(--hlr);box-shadow:var(--glow-r);}
.hof-list.hl-off .hof-list-poster{border-color:var(--offb);box-shadow:none;}
.hof-list.hl-seen .hof-list-row.is-unseen .hof-list-poster{border-color:var(--dimr);box-shadow:none;}
.hof-list.hl-seen .hof-list-row.is-unseen img{filter:grayscale(1) brightness(.46) contrast(.92);}
.hof-list.hl-seen .hof-list-row.is-unseen{opacity:.42;}
.hof-list.hl-left .hof-list-row.is-seen .hof-list-poster{border-color:var(--dimg);box-shadow:none;}
.hof-list.hl-left .hof-list-row.is-seen img{filter:grayscale(1) brightness(.46) contrast(.92);}
.hof-list.hl-left .hof-list-row.is-seen{opacity:.42;}

@media(max-width:430px){
  /* WATCHES + 방향 버튼 + NOT LOGGED가 함께 떠도 닫기 버튼까지 한 줄에 남긴다. */
  #hofView .pace-view-head{gap:3px;}
  #hofView .hof-view-title{font-size:0;letter-spacing:0;}
  #hofView .hof-view-title::after{content:attr(data-short);font-size:10.5px;letter-spacing:1.2px;}
  #hofView .hof-sort{padding-left:6px;padding-right:6px;}
  #hofView .hof-spot{gap:4px;padding-left:6px;padding-right:6px;}
  #hofView .pace-view-head > .icon-btn{width:30px;min-width:30px;height:30px;}
}
/* 발광 세기는 모드와 무관하게 하나다. 모드 차이는 '어느 쪽이 꺼지느냐'뿐 —
   ALL은 둘 다 켜짐, LOGGED는 빨강이 꺼짐, NOT LOGGED는 초록이 꺼짐. */
:root{--hlg:#7ee08f;--hlr:#ff6b63;
  --dimg:rgba(126,224,143,.30);--dimr:rgba(255,107,99,.28);
  --glow-g:0 0 0 1px color-mix(in srgb, #7ee08f 30%, transparent),
           0 0 14px color-mix(in srgb, #7ee08f 48%, transparent);
  --glow-r:0 0 0 1px color-mix(in srgb, #ff6b63 28%, transparent),
           0 0 14px color-mix(in srgb, #ff6b63 44%, transparent);
  --offb:rgba(255,255,255,.35);}
/* Directors 포스터는 Films보다 8% 작다(65.6 대 71.6). 같은 14px 후광이 걸리면
   카드 대비 번짐이 9% 커져 더 우웅거리는 것처럼 보인다. 빛의 세기(색·알파)는
   그대로 두고 번짐 반경만 카드 비율만큼 줄여 후광/카드 비율을 0.196으로 맞춘다. */
.hof-dir-posters{
  --glow-g:0 0 0 1px color-mix(in srgb, #7ee08f 30%, transparent),
           0 0 12.8px color-mix(in srgb, #7ee08f 48%, transparent);
  --glow-r:0 0 0 1px color-mix(in srgb, #ff6b63 28%, transparent),
           0 0 12.8px color-mix(in srgb, #ff6b63 44%, transparent);}

/* 기본(ALL) = 둘 다 켜짐 */
.hof-it.is-seen .hof-cd{border-color:var(--hlg);box-shadow:var(--glow-g);}
.hof-it.is-unseen .hof-cd{border-color:var(--hlr);box-shadow:var(--glow-r);}
/* OFF = 아무것도 강조 안 함. 사진은 전부 컬러로 두되 발광을 끄고
   테두리를 배경에 녹아드는 은은한 톤으로 둘러 자연스럽게 가라앉힌다. */
:is(.hof-grid,.hof-dir-posters).hl-off .hof-cd{border-color:var(--offb);box-shadow:none;}

/* LOGGED = 빨강만 끔 / NOT LOGGED = 초록만 끔. 켜진 쪽은 기본 그대로다. */
:is(.hof-grid,.hof-dir-posters).hl-seen .is-unseen .hof-cd{border-color:var(--dimr);box-shadow:none;}
:is(.hof-grid,.hof-dir-posters).hl-seen .is-unseen img{filter:grayscale(1) brightness(.46) contrast(.92);}
:is(.hof-grid,.hof-dir-posters).hl-seen .is-unseen .hof-ft{opacity:.3;}
:is(.hof-grid,.hof-dir-posters).hl-left .is-seen .hof-cd{border-color:var(--dimg);box-shadow:none;}
:is(.hof-grid,.hof-dir-posters).hl-left .is-seen img{filter:grayscale(1) brightness(.46) contrast(.92);}
:is(.hof-grid,.hof-dir-posters).hl-left .is-seen .hof-ft{opacity:.3;}

.hof-empty{grid-column:1/-1;padding:44px 20px;text-align:center;color:var(--text3);font-size:12.5px;line-height:1.9;}
.hof-empty-sub{font-family:var(--font-mono);font-size:10px;}

/* 미기록 영화 시트 */
.hof-sh-top{display:flex;gap:14px;}
.hof-sh-po{width:88px;flex-shrink:0;border-radius:6px;overflow:hidden;aspect-ratio:2/3;background:var(--bg2);}
.hof-sh-po img{width:100%;height:100%;object-fit:cover;display:block;}
.hof-sh-meta{min-width:0;}
.hof-sh-ti{font-family:var(--font-display);font-size:23px;letter-spacing:.6px;line-height:1.12;color:var(--text);}
.hof-sh-yr{font-family:var(--font-mono);font-size:11px;color:var(--text3);margin-top:5px;}
.hof-sh-st{margin-top:9px;font-size:13px;letter-spacing:1px;}
.hof-sh-src{font-family:var(--font-mono);font-size:9px;color:var(--text3);letter-spacing:.5px;margin-left:7px;}
.hof-sh-dir{font-size:11.5px;color:var(--text2);margin-top:9px;line-height:1.5;}
.hof-sh-note{margin-top:16px;padding:11px 13px;border:1px dashed var(--border);border-radius:9px;
  font-size:11.5px;color:var(--text3);line-height:1.6;}
.hof-sh-note b{color:var(--red);font-weight:600;}

/* ALL-TIME 진입 카드 — 상세 화면 상단(게이지 + 연대 그래프)의 축소판 */
.hof-feature-box{padding:0;overflow:hidden;}
.hof-feature-hero{position:relative;aspect-ratio:16/9;overflow:hidden;background:#090909;}
.hof-feature-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.hof-feature-hero--film img{object-position:center 42%;}
.hof-feature-hero--director img{object-position:center center;}
/* 스틸마다 명암이 달라도 상단 라벨과 하단 정보는 같은 대비를 유지한다. 가운데는 덜 눌러
   사진을 살리고, 글자가 놓이는 위·아래만 MOST WATCHED와 같은 방식으로 어둡힌다. */
.hof-feature-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.5) 66%,rgba(0,0,0,.92) 100%);}
.hof-feature-hero.no-image{background:linear-gradient(145deg,#202229,#08090c 70%);}
.hof-feature-htr{position:absolute;top:8px;left:13px;right:13px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px;}
.hof-feature-htr .sb-title{color:rgba(255,255,255,.86);text-shadow:0 1px 7px rgba(0,0,0,.72);}
.hof-feature-meta{position:absolute;left:13px;right:13px;bottom:48px;z-index:2;min-width:0;
  display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.78);
  font-family:var(--font-mono);font-size:8px;line-height:1;letter-spacing:.35px;
  text-shadow:0 1px 7px rgba(0,0,0,.95);white-space:nowrap;overflow:hidden;}
.hof-feature-meta > span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.hof-feature-meta > span + span::before{content:'·';margin-right:7px;color:rgba(255,255,255,.46);}
.hof-feature-meta--director .five{color:#e1bf52;overflow:visible;flex-shrink:0;}
.hof-feature-meta--director .half{color:#c4c8d0;overflow:visible;flex-shrink:0;}
.hof-feature-meta--director b{font-weight:700;}
.hof-feature-foot{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;
  display:flex;align-items:baseline;gap:10px;color:#fff;}
.hof-feature-title{min-width:0;max-width:68%;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-display);font-size:29px;font-weight:400;line-height:.92;letter-spacing:1.5px;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.82);}
/* 선의 자리는 fitTitleRule이 마지막 줄 끝을 재서 인라인으로 넣는다(격자 밖으로 나간다).
   .hof-feature-foot은 이미 position:absolute라 그 자체가 기준 상자다 — relative를 덧붙이면
   바닥에 붙어 있던 발이 통째로 흐름으로 돌아와 히어로 글자가 전부 어긋난다. */
.hof-feature-hero--film.is-title-long .hof-feature-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;}
.hof-feature-hero--film.is-title-long .hof-feature-title{max-width:none;overflow:visible;text-overflow:clip;
  white-space:normal;overflow-wrap:anywhere;text-wrap:balance;line-height:.9;letter-spacing:1.25px;}
.hof-feature-hero--film.is-title-long .hof-feature-rule{min-width:0;}
.hof-feature-hero--film.is-title-long .hof-feature-meta{bottom:66px;}
.hof-feature-title--director{max-width:72%;font-size:26px;letter-spacing:1.25px;}
.hof-feature-rule{flex:1;min-width:8px;height:1px;background:rgba(255,255,255,.32);transform:translateY(-6px);}
.hof-feature-stat{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.82);}
.hof-feature-stat b{font-family:var(--font-mono);font-size:25px;font-weight:700;line-height:.85;white-space:nowrap;}
.hof-feature-stat em{font-style:normal;font-family:var(--font-display);font-size:9px;line-height:1;
  letter-spacing:2px;opacity:.88;}
.hof-feature-hero--film .hof-feature-stat b{font-size:13px;line-height:1;letter-spacing:.3px;}
.hof-feature-hero--film .hof-feature-stat{transform:translateY(-2px);}
.hof-feature-hero--film .hof-feature-stat em{font-size:6.5px;letter-spacing:.9px;}
/* 카드 히어로 밑 여백 — 기준은 6px(HALL OF FAME DIRECTORS)이고, 카드마다 눈으로
   보이는 무게가 달라 한두 급씩 다르다. 히어로 아래 첫 요소의 성격이 달라서다:
   FILMS는 큰 숫자, MILESTONES는 차트라 더 떨어져야 하고, MOST WATCHED는 목록이라 붙는다. */
.hof-feature-body{padding:6px 15px 12px;}
.hof-feature-box[data-trend="hof"] .hof-feature-body{padding-top:8px;}   /* HALL OF FAME · FILMS */
.hof-feature-body.ms-list{padding-top:12px;}                             /* MILESTONES */
.hof-feature-body .hof-dir-mini-list{margin-top:0;}

.hof-box-right{font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.hof-box-right b{color:var(--accent);font-weight:400;}
.hof-hero--mini{padding:0;}
.hof-hero--mini .hof-hero-n{font-size:30px;}
.hof-hero--mini .hof-hero-of{font-size:12px;}
.hof-hero--mini .hof-hero-pct{font-size:16px;}
.hof-gauge--mini{margin:11px 0 0;}
/* 진입 카드는 글자·막대가 더 작다: 8.5 + 3 + 6.5 + 3 + 40 = 61px */
.hof-sky--mini{margin:15px 0 0;gap:3px;align-items:flex-end;height:61px;}
.hof-sky--mini .hof-col{padding:0;margin:0;cursor:default;gap:3px;}
.hof-sky--mini .hof-col b{font-size:8.5px;}
.hof-sky--mini .hof-col i{border-radius:2px 2px 0 0;}
.hof-sky-ax--mini{margin:6px 0 0;gap:3px;}
/* 연대 라벨은 크기만 줄이고 색은 상세 화면과 같게(--text2) — 카드에서만 흐리면 읽히지 않는다 */
.hof-sky-ax--mini span{font-size:8px;letter-spacing:-.5px;color:var(--text2);}

/* ── 라이트 모드 — OFF 테두리만 라이트 전용, 나머지는 다크와 동일 ── */
[data-theme="light"]{--offb:rgba(0,0,0,.15);}
/* 라이트에서 LOGGED·NOT LOGGED 버튼 텍스트 가독성 보강 */
[data-theme="light"] .hof-spot.is-seen,
[data-theme="light"] .hof-spot.is-left{
  color:color-mix(in srgb, var(--sc) 82%, #000);
  text-shadow:none;}
/* ── system 테마 + 시스템 라이트 — 위와 동일하게 미러링 ── */
@media(prefers-color-scheme:light){[data-theme="system"]{--offb:rgba(0,0,0,.15);}
[data-theme="system"] .hof-spot.is-seen,
[data-theme="system"] .hof-spot.is-left{
  color:color-mix(in srgb, var(--sc) 82%, #000);
  text-shadow:none;}}


/* 카드 안의 등급 요약 — 좌우 여백이 sbox 패딩이라 margin 0 */
.hof-sum--mini{margin:8px 0 0;}
/* 그리드 배치 렌더 센티널 — 스크롤이 여기 닿으면 다음 묶음을 붙인다 */
.hof-more{grid-column:1/-1;height:1px;}

/* ── HALL OF FAME · DIRECTORS ────────────────────────────────────
   Films에서 쓰는 폰트·금/은·관람/미관람 테두리 문법을 그대로 이어간다. */
/* 헤더 버튼과 첫 카드 사이는 헤더 아래 여백(8px)과 합쳐 10px — 카드끼리 간격(12px)보다
   좁아야 헤더가 목록에 붙어 보인다 */
.hof-dir-list{display:flex;flex-direction:column;gap:12px;padding:2px 14px 10px;}
.hof-dir-card{--gc:#4F5661;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--card);
  box-shadow:0 1px 6px rgba(0,0,0,.08);}
.hof-dir-card--gold{--gc:#D4AF37;border:1.5px solid #d4a017;
  background:linear-gradient(145deg,rgba(212,160,23,.09),var(--card) 45%);
  box-shadow:0 3px 15px rgba(212,160,23,.13);}
.hof-dir-card--silver{--gc:#AEB3BC;border:1.5px solid #aeb3bc;
  background:linear-gradient(145deg,rgba(184,184,184,.08),var(--card) 45%);}
.hof-dir-card--bronze{--gc:#B5793E;border:1.5px solid #b5793e;
  background:linear-gradient(145deg,rgba(181,121,62,.08),var(--card) 45%);}
.hof-dir-card--t5{--gc:#8190A8;border-color:color-mix(in srgb,var(--gc) 78%,var(--border));}
.hof-dir-card--t10{--gc:#657185;border-color:color-mix(in srgb,var(--gc) 52%,var(--border));}

.hof-dir-card-head{display:grid;grid-template-columns:53px minmax(0,1fr);
  align-items:center;gap:9px;padding:10px 11px 3px;}

.hof-dir-portrait{position:relative;width:53px;aspect-ratio:2/3;overflow:hidden;border-radius:7px;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--bg2),var(--bg));}
.hof-dir-portrait-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;
  opacity:0;transition:opacity .2s;}
.hof-dir-portrait-img.is-loaded{opacity:1;}
.hof-dir-initials{font-family:var(--font-display);font-size:19px;letter-spacing:1px;color:var(--text3);}
.hof-dir-card-main{min-width:0;}
.hof-dir-card .hof-dir-mini-head strong{font-size:13px;}
.hof-dir-card .hof-dir-mini-gauge{height:7px;margin-top:8px;}
.hof-dir-card .hof-dir-mini-stars{margin-top:7px;}
/* 감독 필모 — 한 줄에 5장, 넘치면 가로 스크롤. 밀도 버튼은 Films 전용이라 여기선 숨는다.
   캡션은 별점만 두고 연도는 밑에 깔린 점선 축으로 내렸다(아래 .hof-tl). */
.hof-dir-posters{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;
  margin:0;padding:14px 12px 12px;}
.hof-dir-posters::-webkit-scrollbar{display:none;}
.hof-dir-posters .hof-it{flex:0 0 calc(20% - 4px);}
.hof-dir-posters .hof-cd{border-width:1.5px;border-radius:4px;}
.hof-dir-posters .hof-ft{font-size:9.4px;gap:0;}
.hof-dir-posters .hof-ft > :first-child{font-size:9.4px;letter-spacing:.2px;}

/* 페이드는 '그쪽에 더 볼 게 있을 때'만 (views-hof.js의 _hofRailFade가 붙인다).
   5편 이하면 아무 데도 안 붙어서 끝이 딱 끊긴다 — 없는 걸 있다고 하지 않는다. */
.hof-dir-posters.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);}
.hof-dir-posters.more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 30px),transparent);}
.hof-dir-posters.more-l.more-r{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 30px,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 30px,#000 calc(100% - 30px),transparent);}

/* 연도 + 점선 축 — 연도를 칸 한가운데 두고 좌우로 점선을 흘린다.
   점 간격을 칸 폭의 정수 분할(20%)로 잡아 어디서도 점이 잘리지 않고,
   좌우 점선이 칸 사이 5px를 절반씩 나눠 물어 이음매에서도 간격이 같다. */
.hof-tl{display:flex;align-items:center;gap:3px;margin-top:5px;height:9px;}
.hof-tl b{font-family:var(--font-mono);font-size:8.8px;font-weight:400;letter-spacing:.2px;
  color:var(--text2);font-variant-numeric:tabular-nums;line-height:1;flex:0 0 auto;}
.hof-tl i{flex:1;height:3px;color:var(--text3);opacity:.5;background-repeat:repeat-x;
  background-image:radial-gradient(circle at center,currentColor .6px,transparent .7px);
  background-size:20% 3px;background-position:left center;}
.hof-tl i.l{margin-left:-2.5px;}
.hof-tl i.r{margin-right:-2.5px;}
/* 축은 첫 해에서 시작해 마지막 해에서 끝난다 — 그 바깥에는 점이 없다 */
.hof-dir-posters .hof-it:first-child .hof-tl i.l,
.hof-dir-posters .hof-it:last-child .hof-tl i.r{background-image:none;}

/* ── 커리어 축 ────────────────────────────────────────────────────
   첫 해~마지막 해를 양 끝으로, 작품을 실제 연도 위치에 찍는다.
   금 = ★★★★★, 은 = ★★★★½. 점 중심(top+지름/2)은 축 선 중심과 정확히 맞춰야 한다 —
   0.5px만 어긋나도 확대하면 눈에 띈다. 여기선 3.5 + 2.5 = 6.0 = 5.5 + 0.5. */
:root{--au:#D4AF37;--ag:#AEB3BC;}
.hof-arc{display:flex;align-items:center;gap:8px;margin-top:9px;}
/* 양 끝 연도는 포스터 밑 연도(.hof-tl b)와 같은 진하기로 — 같은 성격의 값이라 같이 읽혀야 한다 */
.hof-arc-y{font-family:var(--font-mono);font-size:8.4px;color:var(--text2);
  font-variant-numeric:tabular-nums;line-height:1;flex:0 0 auto;}
.hof-arc-ax{position:relative;flex:1;height:12px;}
.hof-arc-ax::before{content:'';position:absolute;top:5.5px;left:0;right:0;height:1px;
  background:color-mix(in srgb,var(--text) 14%,transparent);}
.hof-arc-g{position:absolute;top:3.5px;transform:translateX(-50%);display:flex;align-items:center;}
.hof-arc-g i{width:5px;height:5px;border-radius:50%;flex:0 0 auto;}
.hof-arc-g i.g{background:var(--au);box-shadow:0 0 6px color-mix(in srgb,var(--au) 70%,transparent);}
.hof-arc-g i.s{background:var(--ag);box-shadow:0 0 5px color-mix(in srgb,var(--ag) 50%,transparent);}
/* 같은 해 두 편 = 45% 겹친 두 원. 교집합이 섞여 보이도록 블렌드를 쓴다 —
   라이트는 곱하기(어두워짐), 다크는 스크린(밝아짐)이라야 배경 위에서 같은 인상이 난다. */
.hof-arc-g.n2 i + i{margin-left:-2.25px;}
.hof-arc-g.n2 i{mix-blend-mode:multiply;}
html[data-theme="dark"] .hof-arc-g.n2 i{mix-blend-mode:screen;}
@media (prefers-color-scheme:dark){
  html[data-theme="system"] .hof-arc-g.n2 i{mix-blend-mode:screen;}
}
/* 메인 진입 카드 버전 — 폭이 좁아 한 단계 작게. 점 중심 3.3 + 2.2 = 5.5 = 5 + 0.5 */
.hof-dir-mini-row .hof-arc{gap:6px;margin-top:7px;}
.hof-dir-mini-row .hof-arc-y{font-size:7.8px;}
.hof-dir-mini-row .hof-arc-ax{height:11px;}
.hof-dir-mini-row .hof-arc-ax::before{top:5px;}
.hof-dir-mini-row .hof-arc-g{top:3.3px;}
.hof-dir-mini-row .hof-arc-g i{width:4.4px;height:4.4px;}
.hof-dir-mini-row .hof-arc-g.n2 i + i{margin-left:-1.98px;}

/* All-Time Directors 진입 카드 — Films 게이지와 같은 시각 문법의 금·은·동 3줄. */
.hof-dir-mini-list{display:flex;flex-direction:column;margin-top:9px;}
.hof-dir-mini-row{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:9px;
  padding:9px 0 8px;border-top:1px solid var(--border);}
.hof-dir-mini-row:first-child{border-top:none;padding-top:2px;}
.hof-dir-mini-row .hof-dir-portrait{width:48px;border-radius:6px;}
.hof-dir-mini-main{min-width:0;}
.hof-dir-mini-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px;}
.hof-dir-mini-rank{width:30px;padding:4px 0;border-radius:7px;background:var(--gc);
  color:#fff;text-align:center;font-family:var(--font-mono);font-size:9.5px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;}
.hof-dir-mini-head strong{min-width:0;font-size:13px;font-weight:500;line-height:1.1;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* PTS 자리를 두 자리 폭으로 못 박는다 — 숫자가 0에서 굴러 올라가는 동안 이 칸이 넓어지면
   grid의 1fr(감독 이름)이 매 프레임 좁아진다. 이름은 ellipsis 처리된 긴 텍스트라 재측정
   비용이 크고, 카드 안엔 발광 그림자 달린 포스터가 5장씩 있어 리페인트 범위도 넓다.
   그래서 게이지는 부드럽게 차는데 카드 전체가 뿌득거렸다. */
.hof-dir-mini-head > b{margin-left:3px;font-family:var(--font-mono);font-size:18px;line-height:1;color:var(--gc);
  min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;}
.hof-dir-mini-head > em{font-style:normal;font-family:var(--font-display);font-size:7px;letter-spacing:1px;color:var(--text3);}
.hof-dir-mini-gauge{position:relative;height:6px;margin:7px 0 0;}
.hof-dir-mini-gauge i,.hof-dir-mini-gauge b{position:absolute;left:0;top:0;bottom:0;border-radius:3px;}
.hof-dir-mini-gauge i{right:0;background:color-mix(in srgb,var(--gc) 17%,transparent);}
/* 차오르는 건 width가 아니라 transform이다. width를 애니메이션하면 매 프레임 레이아웃과
   페인트가 일어나고, 그 페인트 범위에 발광 그림자 달린 포스터들이 들어가 아주 비싸다.
   (4배 CPU 스로틀 실측: width 중앙 15.8ms → transform 8.9ms. 인트로를 아예 끈 8.3ms와
   거의 같다. Films가 부드러운 건 게이지 주변이 단순해서였고 여기선 그 값이 다 드러났다.)
   filter:drop-shadow도 별도 렌더 표면을 만들므로 같은 모양의 box-shadow로 바꿨다.
   --gps는 --gp를 0~1로 옮긴 값(views-hof.js가 같이 넣는다). */
.hof-dir-mini-gauge b{width:100%;background:var(--gc);
  transform:scaleX(var(--gps,0));transform-origin:left center;
  box-shadow:0 0 4px color-mix(in srgb,var(--gc) 45%,transparent);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);}
.hof-dir-mini-stars{display:flex;align-items:center;gap:12px;margin-top:6px;
  font-family:var(--font-mono);font-size:9.5px;}
.hof-dir-mini-stars span{display:flex;align-items:center;gap:5px;}
.hof-dir-mini-stars i{font-style:normal;font-size:10px;letter-spacing:.4px;}
/* 개수는 별 글리프에 묻히기 쉬워 굵기로 살린다 (색은 그대로 — 금·은 구분이 우선) */
.hof-dir-mini-stars b{font-weight:600;}
.hof-dir-mini-stars .five{color:#D4AF37;}
.hof-dir-mini-stars .half{color:#969CA8;}
/* FILMS는 개수와 달리 조용해야 한다 — 바로 밑 축 연도(.hof-arc-y)와 같은 무게로 맞춘다 */
.hof-dir-mini-stars .films{margin-left:auto;color:var(--text2);font-weight:400;
  font-size:8.4px;letter-spacing:.5px;}

@media(max-width:374px){
  .hof-feature-title{font-size:27px;max-width:65%;}
  .hof-feature-title--director{font-size:23px;max-width:70%;}
  .hof-feature-meta{gap:5px;font-size:7.5px;}
  .hof-feature-meta > span + span::before{margin-right:5px;}
  .hof-dir-card-head{grid-template-columns:47px minmax(0,1fr);gap:7px;padding-left:9px;padding-right:9px;}
  .hof-dir-portrait{width:47px;}
  .hof-dir-mini-row{grid-template-columns:44px minmax(0,1fr);gap:7px;}
  .hof-dir-mini-row .hof-dir-portrait{width:44px;}
}