/* ── 공용 UI 조각 ────────────────────────────────────────────────────────────
   여러 화면이 같은 모양으로 쓰는 부품을 한 곳에 둔다. 여기엔 '모양'(색 · 글자 · 모서리 · 기본 여백)만 있고,
   화면마다 재서 맞춘 '자리'(줄 간격 · 격자 칸 · 위치 · 화면별 여백)는 각 화면 파일에 남는다.
   여기를 고치면 쓰는 곳이 전부 같이 바뀐다 — 복사본을 찾아다니지 않는다(8px 칩 때 한 벌이 빠졌던 이유).
   이 파일은 app.css 바로 뒤에 실린다: 같은 무게의 화면 규칙이 뒤에서 이긴다. ── */

/* SEE ALL n › — 목록 끝의 '더 보기' 띠. 숫자는 그 목록의 색(--c). 자리(위 여백)는 각 화면이 정한다.
   쓰는 곳: 검색 결과 묶음(제자리 펼치기 — 펼친 끝은 TOP 4 ‹), RATINGS 창 별점 묶음(RANKING 계단 — [TOP 5 ‹][SEE 2+ · n ›]), FILMS PER MONTH · FILMS PER WEEK · LEADERBOARD 창 RANKING(펼치기 —
   펼친 뒤엔 같은 자리가 TOP 10 ‹ 이 되어 다시 접는다, 2026-10-10). */
.see-all{display:flex;align-items:center;justify-content:center;gap:6px;height:30px;border-radius:9px;cursor:pointer;
  font:700 9.5px var(--font-mono);letter-spacing:.12em;color:var(--text2);background:color-mix(in srgb,var(--text) 5%,transparent);
  -webkit-tap-highlight-color:transparent;}
.see-all:active{background:color-mix(in srgb,var(--text) 10%,transparent);}
.see-all b{color:var(--c);}
/* 계단 펼치기 — [TOP 10 ‹][SEE 6+ · 40 ›] 두 알약이 반씩(utils.js rankSeeHtml) */
.see-row{display:flex;gap:8px;}
.see-row > .see-all{flex:1;min-width:0;}

/* 기록 머리의 ✕ — 고른 것(칸 · 막대 · 줄)을 풀고 고르기 전 자리로. 같은 것을 다시 눌러도 풀리지만, 기록까지 내려온 뒤엔
   그게 화면 밖이거나 5px 칸이라 빠져나오기 어려웠다(사용자, 2026-10-10). 쓰는 곳: FILMS PER MONTH · FILMS PER WEEK ·
   LEADERBOARD · RATINGS 창의 기록(목록) 머리 */
.lh-x{flex:none;width:24px;height:24px;margin:-3px -4px -3px 0;border:0;border-radius:99px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font:400 11px/1 var(--font-mono);color:var(--text2);
  background:color-mix(in srgb,var(--text) 8%,transparent);-webkit-tap-highlight-color:transparent;position:relative;}
.lh-x::after{content:'';position:absolute;inset:-10px;}   /* 손가락 자리는 넉넉히 */
.lh-x:active{background:color-mix(in srgb,var(--text) 16%,transparent);}
/* 고른 것 알약 — 고른 동안 창 머리의 ✕ 왼쪽에 [편수] W10 ’24 ✕, 누르면(알약 어디든) 풀린다. 고를 때 화면이 내려가지 않게 된 뒤(2.0.122)
   기록 머리의 ✕까지 내려가지 않고 맨 위에서 풀려고(PWA 2.0.128, 사용자 2026-10-11: "닫기 버튼 왼쪽에, 맨 위에" — 2.0.125는 범례를 고른 것
   줄로 바꿨고, 2.0.126~2.0.127은 범례 왼쪽 빈자리에 ✕만 둬서 무엇이 골라졌는지 몰랐다). 앱은 머리줄을 유리로 그리므로 이 단추는 자리와
   누름만 지키고 앱이 data-*로 유리 타일을 그린다(shell-header.js selTile). 쓰는 곳: FILMS PER MONTH · FILMS PER WEEK · LEADERBOARD 창 */
.sel-chip{position:relative;flex:none;margin-left:auto;display:flex;align-items:center;gap:6px;height:24px;padding:0 4px 0 10px;box-sizing:border-box;
  border:0;border-radius:99px;background:color-mix(in srgb,var(--text) 8%,transparent);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.sel-chip[hidden]{display:none;}
.sel-chip:not([hidden]) + .icon-btn{margin-left:0;}   /* ✕는 알약 바로 옆으로 */
.sel-chip::after{content:'';position:absolute;inset:-8px -6px;}   /* 손가락 자리는 넉넉히 */
.sel-chip:active{background:color-mix(in srgb,var(--text) 15%,transparent);}
.sel-chip b{font:700 10.5px/1 var(--font-mono);white-space:nowrap;}
.sel-chip i{font:400 10px/1 var(--font-mono);font-style:normal;color:var(--text2);width:16px;text-align:center;}
.sel-chip i.ar{width:auto;color:var(--text3);}
.sel-chip b.fl{font-size:9.5px;color:var(--text3);}   /* 편수 — 칸의 등급 색(style), 0편은 흐리게 */

/* 짧은 연도 앞 따옴표(YQ · YQ_SVG, utils.js) — Space Mono의 '는 굵은 막대라 시스템 글꼴의 둥근 ’로(사용자, 2026-10-03) */
.yq{font-family:var(--font);font-weight:600;font-style:normal;}

/* 관람 칩 — 관람 한 번 = 칩 하나. 바탕 = 그 해 색(--sc), 글자 = 그 위의 잉크(--sk).
   글자 8px(7.5px 판의 ×1.067) · 가로 여백 3.73/2.67 · 위아래 2px(높이 12 — 제목 + 칩이 스틸 30pt와 같게).
   쓰는 곳: MOST WATCHED 감독 · 영화(칩판 .md-ch · 작품 줄), 검색 · 컬렉션 FILMOGRAPHY, HOF FILMS 목록 보기. */
.ychip{display:block;flex:0 0 auto;background:var(--sc);color:var(--sk,#fff);border-radius:3.2px;
  padding:2px 3.73px 2px 2.67px;font-family:var(--font-mono);font-size:8px;font-weight:700;
  line-height:1;letter-spacing:-.213px;font-style:normal;}

/* 순위 알약 — 다섯 곳(HOF 사진 칸 .hof-dbox-rank · 이름 앞 .hof-dbox-brank(HOF · MOST WATCHED 바깥 줄) ·
   상세 카드 사진 위 .hof-dir-rank · 검색 줄 · 컬렉션 머리 .rank-pill)이 한 모양이다: 등급색 얇은 테(1px) + 아주 옅은 바탕(12%) + 등급색 숫자.
   폭 30 · 모서리 7 · 모노 9.5px 굵게. 금 · 은으로 속을 꽉 채우니 번쩍여서 촌스러웠다(사용자 선택: 테 + 틴트).
   숫자 색은 테마 쪽으로 한 발 — 다크에선 밝게, 라이트에선 짙게(--tier-ink, theme.css) 해서 은색도 읽힌다.
   사진 위(.hof-dbox-rank · .hof-dir-rank)는 옅은 바탕 대신 어두운 판과 흐림을 깔고 테 · 숫자를 제 색 그대로.
   등급색(--gc)은 각 화면의 등급 클래스가 준다(app-hof.css 끝 .tier--* 등) — 여기선 받아 쓰기만. */
.hof-dbox-rank,.hof-dbox-brank,.hof-dir-rank,.rank-pill{box-sizing:border-box;min-width:30px;padding:3px 0;border-radius:7px;
  text-align:center;font-family:var(--font-mono);font-size:9.5px;font-weight:700;line-height:1;
  background:color-mix(in srgb,var(--gc) 12%,transparent);color:color-mix(in srgb,var(--gc) 84%,var(--tier-ink,#fff));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gc) 70%,transparent);}
.hof-dbox-rank,.hof-dir-rank{background:rgba(0,0,0,.45);color:var(--gc);box-shadow:inset 0 0 0 1px var(--gc);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}

/* ── 사진 머리(히어로) ─────────────────────────────────────────────────────────
   스틸 · 인물 사진을 16:9로 깔고 위 · 아래만 눌러(스크림) 흰 글자를 얹는다. 발(.hof-feature-foot)은
   이름(Bebas 29) + 선 + 숫자 칸(모노 25 + 작은 라벨). 쓰는 곳: HALL OF FAME FILMS · DIRECTORS · MILESTONES,
   MOST WATCHED FILMS · DIRECTORS(바깥 카드 · 상세 카드). 컬렉션 머리(.cl-hero)는 틀(높이 · 발 배치)이 달라
   사진 채움 · 스크림 · 빈 사진 바탕 · 이름 글자만 같이 쓴다.
   화면마다 다른 자리(발 · 윗줄 높이, 이름 칸 폭, 사진 초점, 숫자 색)는 각 화면 파일에 있다. ── */
.hof-feature-hero{position:relative;aspect-ratio:16/9;overflow:hidden;background:#090909;}
.hof-feature-hero img,.cl-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와 같은 방식으로 어둡힌다. */
/* 1px씩 넘치게 깐다(사진 머리가 넘치는 걸 자르니 보이는 건 그대로) — 머리의 위가 반 픽셀에 걸리면 사진과 이 막이 서로 다른 픽셀로
   맞춰져, 맨 밑 한 줄에 어둡게 눌리지 않은 사진이 가는 밝은 선으로 비쳤다(PWA 2.0.209; 사용자 스크린샷, 측정: 밑 한 줄 96 vs 바로 위 14) */
.hof-feature-hero::after,.cl-hero::after{content:"";position:absolute;inset:-1px;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,.cl-hero.no-img{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,.cl-foot h2{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;}
/* 자릿수 롤(.numeric-text, views-pace)이 걸린 숫자 — 롤 칸은 1.04em 높이라 그대로 두면 상자가 자라
   옆의 이름 · 선이 2.4pt 올라간다(PTS · TIMES). 위아래를 음수 여백으로 깎아 원래 줄 높이(.85)로 되돌린다.
   글자 상태와 롤 상태를 번갈아 재서 기준선 0으로 맞춘 값이다. */
.hof-feature-stat b.numeric-text{margin:-.095em 0;}
.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;}
@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;}
}