/* 2026-08-29 rev.45 — hot100.css (PC 사이드바 sticky top 110px→60px — "히어로 배너 몫"을
   90px→40px로 줄여서 재계산(40 + 기존 여백 20 = 60). 관리자님 지정) */
/* 2026-08-28 rev.44 — hot100.css (PC 사이드바 .hh-side-link 항목 높이 38px→32px로
   축소 — 그룹 안 메뉴 항목끼리 간격 줄이기 요청) */
/* 2026-08-23 rev.43 — hot100.css (인물 핫100 순위변동(▲▼NEW) 폰트 조정 — 볼드체 전부 제거
   (font-weight:700→400, PC/모바일 공통), 모바일(max-width:860px)에서만 크기 축소:
   1~2위(포스터카드, .hh-chg 기본) 22px→16px, 3~100위(리스트, .hh-chg.sm) 15px→12px.
   PC 크기는 22px/15px 그대로 유지) */
/* 2026-08-23 rev.42 — hot100.css (rev.41 되돌림+재작업 — hot100-persons-likes.html이
   같은 CSS를 공유하는데 그 페이지 마크업은 안 바꿔놓고 .hp-rank-num/.hp-row-rank의
   위치 스타일만 wrap 쪽으로 옮겨버려서, 좋아요 페이지 1~4위 랭킹 숫자가 사라지는 사고가
   있었음. 이번엔 기존 클래스(.hp-rank-num, .hp-row-rank) 스타일은 원래대로 전부 유지하고,
   새 wrap 클래스(.hp-rank-wrap, .hp-row-rank-wrap)는 "추가" 규칙으로만 얹어서 새 마크업
   (hot100-persons.html)에서만 겹쳐 쓰이게 함. 좋아요 페이지는 영향 전혀 없음) */
/* 2026-08-23 rev.41 — hot100.css (인물 핫100 순위변동(▲▼NEW) 표시 추가 — 관리자님 요청으로
   랭킹 숫자 "옆"이 아니라 "아래"에 배치(작품 핫100은 옆). 상단 포스터카드(.hp-rank-wrap)는
   기존 절대위치를 숫자에서 wrap으로 옮기고 세로(column) 배치, 리스트(.hp-row-rank-wrap)는
   기존 가로 여백(margin-right)을 wrap으로 옮기고 세로(column) 배치. .hh-chg는 작품 핫100에서
   이미 쓰던 클래스 재사용, 새 클래스 없음) */
/* 2026-08-20 rev.40 — hot100.css (OTT 로고 크기 조정 — 관리자님 요청, 핫100 전체(작품/
   K드라마/박스오피스/인물) 공용이라 여기 한 곳만 고치면 전부 적용됨.
   1~2위(hh-top4-ott): PC 52→40px, 모바일 44→32px
   포스터(work-ott .ott-logo): PC 35→30px, 모바일 30→26px) */
/* 2026-08-16 rev.39 — hot100.css (FAQ 섹션 상단 여백 24px→50px — 랭킹 콘텐츠와 FAQ 사이
   여백이 좁다는 피드백) */
/* 2026-08-16 rev.38 — hot100.css (FAQ 섹션 공용 CSS 신규 추가 — 넷플릭스 페이지 FAQ
   스타일 그대로 재사용. 작품/K드라마/인물 핫100 등 이 CSS를 쓰는 페이지 전체에서
   공유. hh-main 안에 들어가는 구조라 사이드바 폭은 침범하지 않음. 첫 적용은
   hot100-works.html) */
/* 2026-08-16 rev.37 — hot100.css (PC 사이드바 고정 위치 조정 — 스크롤해서 헤더에 붙은 뒤에도
   히어로 배너가 있었을 때와 비슷한 여백감을 유지하도록 .hh-sidebar의 sticky top을
   20px→110px(히어로 배너 대략 높이 90px + 기존 여백 20px)로 변경. 값은 눈대중 측정이라
   실제 화면 보고 미세조정 필요할 수 있음) */
/* 2026-08-16 rev.36 — hot100.css (헤더 고정 누락 버그 수정 — netflix.html 등 다른 페이지엔
   #ottrang-header{position:sticky;top:0} 규칙이 페이지 자체 CSS에 있는데, 핫100 페이지들
   (hot100-works/kdrama/persons 등)이 쓰는 이 공용 CSS엔 빠져있어서 스크롤하면 헤더까지
   같이 밀려 올라가던 문제. 동일한 규칙을 여기 추가해서 핫100 전 페이지에 한 번에 적용) */
/* 2026-08-13 rev.35 — hot100.css (작품 핫100 모바일: OTT 로고 15% 축소 — 1~2위 52→44px,
   3~100위 35→30px) */
/* 2026-08-13 rev.34 — hot100.css (모바일 1~2위 포스터 카드 이름 두께 700→600 + line-height
   1.2로 축소해서 이름↔작품명 체감 간격 줄임) */
/* 2026-08-13 rev.33 — hot100.css (모바일 숫자 블록 34→28px) */
/* 2026-08-13 rev.32 — hot100.css (모바일 3가지 추가 조정)
   ① 숫자 블록 34px 고정 + 24px(자릿수 상관없이 사진 위치 고정)
   ② 한글/영문 이름 line-height 1.6(기본값)→1.2로 줄여 체감 간격 축소
   ③ 1~2위 포스터 카드 이름 21→19px */
/* 2026-08-13 rev.31 — hot100.css (모바일 카드 왼쪽 여백 추가 축소 — 카드 안쪽 왼쪽 패딩 12→8px,
   숫자 박스가 고정폭(30px)+가운데정렬이라 그 안에도 빈 공간이 있던 걸 내용폭+왼쪽정렬로 변경.
   "카드 왼쪽 끝↔숫자" 사이 체감 간격이 넓던 문제 수정) */
/* 2026-08-13 rev.30 — hot100.css (모바일 3가지 여백/크기 조정)
   ① 좌우 여백 14→4px (.hh-outer/.hp-outer/.hh-hero-inner)
   ② 숫자↔사진 간격 5px로 재확인(단일 margin-right 값)
   ③ 인물 리스트(3위~) 사진 100→80px 세로, 가로도 비율대로 67→54px, 카드 최소높이도 맞춤 */
/* 2026-08-12 rev.29 — hot100.css (히어로 옵션버튼이 타이틀 옆이 아니라 화면 맨 오른쪽에
   붙어있던 문제 수정 — 타이틀에 flex:1을 줘서 남는 공간을 억지로 다 차지하고 있었음.
   flex:0 1 auto로 바꿔서 글자 폭만큼만 차지하게 함 — 이제 버튼이 글자 바로 옆에 붙음) */
/* 2026-08-12 rev.28 — hot100.css (모바일 히어로 타이틀 28→24px 축소 + 타이틀·옵션버튼 정렬 수정 —
   타이틀이 길어 줄바꿈되면서 옵션버튼과 높이가 어긋나 보이던 문제. 타이틀행 안에서는 타이틀을
   항상 한 줄(넘치면 말줄임 …)로 고정, 옵션버튼은 줄어들지 않게 처리해 항상 같은 높이로 나란히
   보이게 함) */
/* 2026-08-12 rev.27 — hot100.css (드롭다운 position:absolute→fixed로 변경 — overflow:hidden
   조상 때문에 기기마다 다르게 깨지던 버그 근본 수정. hot100-nav.js rev.5와 짝) */
/* 2026-08-12 rev.26 — hot100.css (히어로 옵션버튼을 전체화면 바텀시트→버튼 바로 아래 오른쪽
   정렬 드롭다운으로 변경 — 화면 전체를 덮지 않고 필요한 크기만 차지. .hh-hero-option-wrap으로
   버튼 감싸서 위치 기준점 만듦, .hh-hero-option-dropdown이 그 안에서 top:100% 배치.
   hot100-nav.js rev.4, hot100-persons.html rev.17, hot100-persons-likes.html rev.14와 짝) */
/* 2026-08-12 rev.25 — hot100.css (히어로 옵션버튼 신규 — 모바일 전용, 인물 핫100 계열(일간/주간/
   좋아요순/월간준비중)에서만 씀. 사이드바 선택 표시(왼쪽 골드 바 + 도트)와 톤 통일.
   히어로 제목 줄에 버튼 나란히 배치하는 .hh-hero-title-row, 버튼(.hh-hero-option-btn),
   바텀시트(.hh-hero-option-sheet 계열) 추가. hot100-nav.js rev.3, hot100-persons.html rev.16,
   hot100-persons-likes.html rev.13, hot100-works.html rev.30과 짝) */
/* 2026-08-12 rev.24 — hot100.css (모바일 .hp-top 2열에 !important 추가 — 부분전환 후에도 적용되게) */
/* 2026-08-12 rev.23 — hot100.css (hp-outer 추가 — 인물 페이지 전용, hh-outer와 완전 분리) */
/* 2026-08-12 rev.22 — hot100.css (인물 핫100 모바일 개편 — 1~2위 2열, 리스트 간격/폰트 조정,
   프로필보기 1px 작게. hot100-persons.html rev.14와 짝) */
/* 2026-08-12 rev.21 — hot100.css (hh-hero-inner overflow:hidden 추가 — HOT 글자 본문 안으로) */
/* 2026-08-12 rev.20 — hot100.css (hh-hero-bg 폰트 120→100px 축소, clip-path로 본문 안으로) */
/* 2026-08-12 rev.19 — hot100.css (hh-hero-bg를 hh-hero 직속으로 이동 — hh-hero overflow:hidden으로 확실히 잘림) */
/* 2026-08-12 rev.18 — hot100.css (hh-hero-inner overflow:hidden 제거(히어로 사라지던 문제),
   hh-hero-bg max-width+overflow:hidden으로 본문 이탈 방지) */
/* 2026-08-12 rev.17 — hot100.css (hh-hero-inner overflow:hidden 추가 — HOT 배경글자가 본문 밖으로 나오던 문제 수정) */
/* 2026-08-12 rev.16 — hot100.css (히어로 구조 확정 — 전체너비, hh-hero-inner로 콘텐츠 정렬,
   hh-outer 원복(max-width+padding+flex), 모바일 hh-outer 패딩 수정) */
/* 2026-08-12 rev.15 — hot100.css (작품 핫100 모바일 레이아웃 개편 —
   ① 히어로 배너 추가(PC+모바일 공통, 넷플릭스 히어로 60% 높이, 빨간색 계열)
   ② 모바일 1~2위 1열 큰 카드, 3~100위 2열 포스터로 통일
   ③ 51~100위 더보기(접기) 버튼 CSS
   ④ hh-outer 모바일에서 padding-top 제거(히어로가 상단 역할) */
/* 2026-08-12 rev.14 — hot100.css (사이드바 섬세 조정 4건 —
   ① 구분선 색 border→border2(더 밝게), ② 타이틀 font-weight 900→700+가운데정렬,
   ③ 카테고리헤더/메뉴 글자 13→14px, ④ 준비중 뱃지 font-weight 600→700로 100뱃지와 완전통일) */
/* 2026-08-12 rev.13 — hot100.css (사이드바 카테고리 헤더 수정 3건) */
/* 2026-08-12 rev.10 — hot100.css (사이드바 그룹 타이틀 클릭 링크 스타일 .hh-side-title-link 추가 —
   hot100-sidebar.html rev.3과 짝. 기존 .hh-side-title(클릭 불가 라벨)은 그대로 유지, 별개 클래스로
   추가해서 OTT별 랭킹 타이틀 등 기존 스타일에 영향 없음) */
/* 2026-08-12 rev.9 — hot100.css (일간/주간/월간 탭 스타일 추가) */
/* 2026-08-11 rev.8 — hot100.css (5~100위 포스터↔글자 gap +5px, 최신작품 색상 #a0a0bc로 변경) */
/* 2026-08-11 rev.7 — hot100.css (폰트굵기 전반 조정, 1~4위: 순위숫자 50%확대·SNS이름옆·
   우측상단 조회수 골드·조회수 볼드제거, 5~100위: 이름1px축소·MBTI제거·조회수 볼드제거) */
/* 2026-08-11 rev.6 — hot100.css (5~100위 리스트형 UI 개선 — 포스터 높이 100px, 순위숫자↔포스터
   간격 +15px, 조회수 골드색, 영어이름 추가, 영어이름↔최신작품 간격, 프로필보기 우측하단.
   hot100-persons.html rev.7과 짝) */
/* 2026-08-11 rev.5 — hot100.css (인물 핫100 버그 수정 3건 + 글씨 크기 확대 — hot100-persons.html rev.6과 짝)
   ① 5~100위 리스트: 랭킹숫자를 사진 위 오버레이(.hp-row-rank-num, absolute)에서 없애고,
      사진 왼쪽 바깥의 별도 텍스트(.hp-row-rank)로 이동.
   ② 5~100위 리스트 카드 배경색을 --card(공용 카드색)에서 참고 이미지 기준 짙은 남색
      --hp-row-bg로 교체.
   ③ 1~4위 포스터형 + 5~100위 리스트형 전체 글씨(이름/MBTI/최근작품/조회수/프로필보기)
      크기를 기존 대비 1.5배로 확대. */
/* 2026-08-11 rev.4 — hot100.css (인물 핫100 SNS·MBTI·최근작품·조회수·프로필보기 정보 추가 
   1~4위(포스터): 사진 위 랭킹숫자(좌상단)+SNS(우상단) 오버레이, 사진 아래 이름+MBTI→최근작품→조회수.
   5~100위(리스트): 사진 위엔 랭킹숫자만, SNS는 이름 옆에 인라인 아이콘, MBTI도 이름 옆,
   아랫줄 최근작품, 카드 우상단 조회수+프로필보기. hot100-persons.html rev.5와 짝) */
/* 2026-08-11 rev.3 — hot100.css (작품 핫100 5위부터: 연도 표시 제거, 평점을 제목과 같은 줄로 이동,
   제목 폰트 14→15px, 평점 폰트 12→14px로 확대. work-title/work-meta를 work-title-row 한 줄
   구조로 교체 — hot100-works.html의 _posterCardHtml() 마크업 변경과 짝) */
/* 2026-08-11 rev.2 — hot100.css (html에 scrollbar-gutter:stable 추가 — 로딩 전(콘텐츠 짧음,
   스크롤바 없음) → 로딩 후(콘텐츠 길어짐, 스크롤바 생김) 전환 시 스크롤바 폭만큼 화면 전체가
   좌우로 밀리면서 헤더까지 같이 움직이던 현상 수정. 스크롤바 자리를 처음부터 항상 비워둠) */
/* 2026-08-11 rev.1 — hot100.css (신규 생성 — hot100-works.html/hot100-persons.html이 각자
   <style> 안에 갖고 있던 CSS를 하나로 통합. 부분전환(hot100-nav.js) 방식으로 페이지를 오가면
   콘텐츠 HTML은 fetch로 바뀌는데, 페이지마다 따로 있던 <style>은 안 바뀌어서 상대방 페이지의
   카드 스타일(work-card/hp-card 등)이 하나도 안 입혀지는 문제가 있었음 — 두 페이지가 이 파일
   하나를 공유해서 처음부터 모든 카드 스타일을 다 갖고 있게 만들어 해결.
   추후 드라마100/예능100 등 새 탭이 생겨도 이 파일 하나에 카드 스타일을 이어서 추가하면 됨. */

:root {
  --bg:#0c0c10; --bg2:#13131a; --bg3:#1a1a24; --card:#16161f;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.16);
  --text:#ededf0; --muted:#7a7a96; --muted2:#a0a0bc;
  --accent:#e63946; --gold:#f0b429; --green:#34d399; --red:#f87171;
  --NF:#e50914; --TV:#ff153c; --DS:#06b6d4; --CP:#1ac44d; --WV:#0070f3;
  --mono:'DM Mono',monospace; --sans:'Noto Sans KR',sans-serif;
  --disp:'Bebas Neue',sans-serif; --r:10px; --max-w:1200px;
  --hp-row-bg:#262b3a; /* [2026-08-11 rev.5] 인물 핫100 5~100위 리스트 카드 배경 — 참고 이미지 색 */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6}

/* ══════════ 작품 핫100 히어로 배너 ══════════
   전체 너비(사이드바 포함) — 넷플릭스와 동일 구조
   hh-hero-inner가 hh-outer와 동일한 max-width/padding으로 콘텐츠 정렬 */
.hh-hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--border);
  /* overflow:hidden이 hh-hero 전체에 걸려야 배경 HOT 글자가 밖으로 안 나감 */
}
.hh-hero-inner{
  max-width:var(--max-w); margin:0 auto;
  padding:18px 20px 14px; position:relative;
  overflow:hidden;
}
/* 우측 빨간 글로우 */
.hh-hero::before{
  content:''; position:absolute; top:-30px; right:-50px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(229,9,20,0.16) 0%,transparent 70%);
  pointer-events:none;
}
/* HOT 대형 배경 글자 — right 값으로 본문 안에 위치 */
.hh-hero-bg{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:var(--disp); font-size:100px; color:rgba(229,9,20,0.05);
  line-height:1; pointer-events:none; user-select:none; letter-spacing:-4px;
  clip-path:inset(0);
}
/* 눈썹 라인 */
.hh-hero-eyebrow{
  font-family:var(--mono); font-size:11px; color:#E50914;
  letter-spacing:3px; text-transform:uppercase; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.hh-hero-eyebrow::before{
  content:''; display:block; width:24px; height:1px; background:#E50914;
}
/* 메인 타이틀 — 넷플릭스 52px의 60% = 32px */
.hh-hero-title{
  font-family:var(--disp); font-size:32px; letter-spacing:2px;
  line-height:1; margin-bottom:6px;
}
.hh-hero-title .hh-red{ color:#E50914; }
/* 서브 텍스트 */
.hh-hero-sub{
  font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.5px;
}
/* 모바일 히어로 */
@media(max-width:860px){
  .hh-hero-inner{ padding:14px 4px 12px; }
  .hh-hero-title{ font-size:24px; }
  .hh-hero-bg{ font-size:80px; right:14px; }
}

/* ══════════ 히어로 옵션버튼 (모바일 전용, 인물 핫100 계열만) ══════════
   제목 옆에 알약(pill) 버튼 하나만 두고, 누르면 버튼 바로 아래(오른쪽 정렬)에
   작은 드롭다운으로 옵션 4개 펼침. 화면 전체를 덮지 않음.
   작품 페이지 등 마크업 자체가 없는 페이지에서는 아무 영향 없음. */
.hh-hero-title-row{ display:flex; align-items:center; gap:10px; }
/* [2026-08-12 수정] 타이틀이 길어서 줄바꿈되면 옵션버튼과 높이가 어긋나 보이던 문제 —
   타이틀은 항상 한 줄(넘치면 말줄임), 옵션버튼은 줄어들지 않게 고정. margin-bottom도
   행 안에서는 정렬을 흐트러뜨려서 제거. */
.hh-hero-title-row .hh-hero-title{
  min-width:0; flex:0 1 auto; margin-bottom:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hh-hero-option-wrap{ position:relative; flex-shrink:0; }
.hh-hero-option-btn{ display:none; } /* PC 기본 숨김 */

@media(max-width:860px){
  .hh-hero-option-btn{
    display:flex; align-items:center; gap:6px;
    height:28px; padding:0 12px; border-radius:20px;
    border:1px solid var(--border2); background:rgba(240,180,41,.08);
    color:var(--gold); font-size:12px; font-weight:700; font-family:var(--sans);
    cursor:pointer; white-space:nowrap;
  }
  .hh-hero-option-btn svg{ width:9px; height:9px; transition:transform .15s; }
  .hh-hero-option-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
}

/* 드롭다운 — 버튼 바로 아래, 오른쪽 정렬, 필요한 만큼만 폭 차지(화면 안 가림).
   [2026-08-12 수정] position:fixed로 변경 — 예전엔 .hh-hero-option-wrap 기준
   position:absolute였는데, 조상(.hh-hero-inner)에 overflow:hidden(배경 "HOT" 글자
   삐져나옴 방지용)이 걸려있어서 브라우저마다 드롭다운이 잘리거나 이상하게 늘어나는
   버그가 있었음(기기별로 overflow:hidden 처리 방식이 달라 증상도 제각각이었음).
   position:fixed는 이 overflow:hidden 영향을 안 받고 화면 기준으로 그려짐 —
   위치(top/right)는 hot100-nav.js가 버튼 클릭 시 실측해서 JS로 지정. */
.hh-hero-option-dropdown{
  position:fixed; top:0; right:0;
  min-width:126px; background:var(--bg2); border:1px solid var(--border2);
  border-radius:12px; padding:4px; z-index:500;
  box-shadow:0 10px 28px rgba(0,0,0,.4);
  display:none;
}
.hh-hero-option-dropdown.open{
  display:block; animation:hhDropIn .14s ease-out;
}
@keyframes hhDropIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.hh-hero-option-item{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 10px;
  border-radius:8px; text-decoration:none; color:var(--muted2);
  font-size:13px; font-weight:500; border-left:3px solid transparent;
  white-space:nowrap; transition:background .12s,color .12s;
}
.hh-hero-option-item::before{
  content:''; flex-shrink:0; width:5px; height:5px; border-radius:50%; background:var(--muted);
}
.hh-hero-option-item:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.hh-hero-option-item.active{
  color:var(--gold); font-weight:700;
  border-left:3px solid var(--gold); background:rgba(240,180,41,.10);
}
.hh-hero-option-item.active::before{ background:var(--gold); }
.hh-hero-option-item.disabled{
  color:var(--muted); pointer-events:none;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.hh-hero-option-item.disabled::before{ background:var(--border2); }


/* hh-outer: max-width + padding + flex(사이드바+메인) */
.hh-outer{ max-width:var(--max-w); margin:0 auto; padding:24px 20px 80px; display:flex; gap:28px; align-items:flex-start; }

/* hp-outer: 인물 핫100 전용 — hh-outer와 완전 분리 */
.hp-outer{ max-width:var(--max-w); margin:0 auto; padding:24px 20px 80px; display:flex; gap:28px; align-items:flex-start; }

/* ── 헤더 sticky — netflix.html 등 다른 페이지와 동일 규칙 (2026-08-16 rev.36) ── */
#ottrang-header { position:sticky; top:0; z-index:200 }

/* ── 왼쪽 메뉴(hot100-sidebar.html에서 fetch로 불러옴) ── */
#ottrang-hh-sidebar{display:contents}
.hh-sidebar{flex:0 0 221px;position:sticky;top:60px}
/* [2026-08-12 수정] 두께 줄이고 가운데 정렬 */
.hh-brand-title{font-size:24px;font-weight:700;color:var(--text);line-height:1.2;letter-spacing:-.3px;text-align:center}

/* [2026-08-12 rev.12 신규] 사이드바 전면 개편 — Claude Design 기반
   핵심: 그룹 구분선, 도트, 왼쪽 3px 골드 바 + 노란 틴트 선택 표시 */

/* 그룹 묶음 — 위 라인 없이 여백만 */
.hh-side-group{margin-bottom:8px;padding-top:20px}

/* 그룹 헤더 — 굵고 밝은 글자 + 오른쪽으로 뻗는 구분선(border2로 더 밝게) */
.hh-side-title{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;color:var(--text);
  letter-spacing:0;padding:0 12px;margin-bottom:4px;
}
.hh-side-title::after{
  content:'';flex:1;height:1px;background:var(--border2);
}

/* 그룹 헤더 — 클릭 가능한 링크(작품 랭킹/인물 랭킹) */
.hh-side-title-link{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;font-size:14px;font-weight:700;
  color:var(--text);letter-spacing:0;
  padding:0 12px;margin-bottom:4px;
}
.hh-side-title-link::after{
  content:'';flex:1;height:1px;background:var(--border2);
}
.hh-side-title-link:hover{color:var(--text)}
.hh-side-title-link.active{color:var(--text)}

/* 메뉴 항목 — 높이 32px 고정, 도트 앞에 붙음 */
/* [2026-08-28 rev.수정] 38px → 32px — 그룹 안 항목 간격 축소 요청 */
.hh-side-link{
  display:flex;align-items:center;gap:10px;
  height:32px;padding:0 12px 0 14px;
  border-radius:0;color:var(--muted2);
  font-size:14px;font-weight:500;text-decoration:none;
  margin-bottom:0;position:relative;
  border-left:3px solid transparent; /* 선택 시 골드 바 자리 */
  transition:background .12s,color .12s;
}
.hh-side-link:hover{background:rgba(255,255,255,.04);color:var(--text)}

/* 선택 상태 — 왼쪽 3px 골드 바 + 은은한 노란 틴트 */
.hh-side-link.active{
  border-left:3px solid var(--gold);
  background:rgba(240,180,41,.10);
  color:var(--gold);
  font-weight:700;
}

/* 비활성(준비중) */
.hh-side-link.disabled{
  color:var(--muted);cursor:default;pointer-events:none;
  display:flex;justify-content:space-between;align-items:center;
}

/* 서브메뉴 도트 — 5px 원형 회색 */
.hh-side-link::before{
  content:'';flex-shrink:0;
  width:5px;height:5px;border-radius:50%;
  background:var(--muted);transition:background .12s;
}
.hh-side-link:hover::before{background:var(--muted2)}
.hh-side-link.active::before{background:var(--gold)}
.hh-side-link.disabled::before{background:var(--border2)}

/* OTT 항목 — 브랜드 컬러 도트(::before 색상 오버라이드) */
.hh-side-link.ott-nf::before{background:var(--NF)}
.hh-side-link.ott-tv::before{background:var(--TV)}
.hh-side-link.ott-ds::before{background:var(--DS)}
.hh-side-link.ott-bo::before{background:var(--gold)}
.hh-side-link.ott-wv::before{background:var(--WV)}
.hh-side-link.ott-cp::before{background:var(--CP)}

/* OTT 이미지 아이콘 제거 — 도트로 통일 */
.hh-side-link img{display:none}

/* "100" 뱃지 + "준비중" 뱃지 — 완전 동일한 크기/여백으로 통일 */
.hh-rank-badge,
.hh-soon{
  flex-shrink:0;
  font-size:10px;font-weight:700;
  border-radius:4px;padding:2px 6px;
  line-height:1.4;
  min-width:36px;text-align:center;
  box-sizing:border-box;
}
/* "100" 뱃지 — 선택 시에만 보임, 골드 배경 */
.hh-rank-badge{
  display:none;
  margin-left:auto;
  color:#000;
  background:var(--gold);
  border:1px solid var(--gold);
}
.hh-side-link.active .hh-rank-badge{display:inline-block}
/* "준비중" 뱃지 — 아웃라인 */
.hh-soon{
  margin-left:auto;
  color:var(--muted);
  border:1px solid var(--muted);
  background:transparent;
}

/* ── 메인(공통) ── */
.hh-main{flex:1;min-width:0}
.hh-empty,.hh-loading{color:var(--muted);font-size:13px;padding:40px 0;text-align:center}

/* ── 일간/주간/월간 탭 ── */
.hp-period-tabs{display:flex;gap:4px;margin-bottom:20px}
.hp-period-tab{padding:7px 20px;border-radius:8px;border:1px solid var(--border);background:transparent;
  color:var(--muted2);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .15s}
.hp-period-tab:hover{background:var(--bg3)}
.hp-period-tab.active{background:var(--gold);color:#000;border-color:var(--gold)}
.hp-period-tab-soon{color:var(--muted);cursor:default;pointer-events:none}

/* ══════════ 작품 랭킹(hot100-works.html) 전용 ══════════ */

.hh-top4{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:32px}
.hh-top4-card{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
  aspect-ratio:16/9;background:var(--bg3)}
.hh-top4-card img.bg{width:100%;height:100%;object-fit:cover;display:block}
.hh-top4-fade{position:absolute;left:0;right:0;bottom:0;height:70%;
  background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 60%,transparent 100%)}
.hh-top4-rank-wrap{position:absolute;top:12px;left:16px;display:flex;align-items:center;gap:8px;z-index:2}
.hh-top4-rank{font-family:var(--disp);font-size:58px;font-style:italic;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.9);line-height:1}
.hh-top4-rank.r1{color:var(--gold)}
.hh-top4-ott{position:absolute;top:12px;right:16px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:60%}
.hh-top4-ott img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 1px 5px rgba(0,0,0,.6)}
.hh-top4-info{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.hh-top4-title{color:#fff;font-size:20px;font-weight:800;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hh-top4-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hh-rating{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;
  font-family:var(--mono);color:#fff}
.hh-rating .star{color:var(--gold)}

/* 순위 변동 표시 — ▲상승/▼하락/–유지/NEW신규 */
.hh-chg{font-family:var(--mono);font-size:19px;font-weight:400;display:inline-flex;align-items:center;gap:1px;white-space:nowrap}
.hh-chg.up{color:var(--green)}
.hh-chg.down{color:#ff1a1a}
.hh-chg.same{color:#3b9eff}
.hh-chg-bar{display:inline-block;width:18px;height:4px;border-radius:2px;background:currentColor}
.hh-chg.sm .hh-chg-bar{width:13px;height:3px}
.hh-chg.new{color:var(--gold)}
.hh-chg.sm{font-size:15px}

/* 5위부터 — 검색결과 페이지와 동일한 포스터 카드(1줄 4개) */
.hh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 16px}
.work-card{cursor:pointer;min-width:0}
.work-poster{position:relative;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:var(--bg3);margin-bottom:8px}
.work-poster>img{width:100%;height:100%;object-fit:cover;display:block}
.work-poster-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--muted)}
.work-rank-wrap{position:absolute;top:6px;left:6px;display:flex;align-items:center;gap:8px;z-index:2}
.work-rank-num{font-family:var(--disp);font-size:48px;font-style:italic;
  color:#fff;line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.9)}
.work-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0}
.work-title{font-size:15px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.work-rating{font-family:var(--mono);font-size:14px;color:var(--gold);flex-shrink:0}
.work-ott{position:absolute;top:6px;left:6px;right:6px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px}
.ott-logo{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.5)}

/* ══════════ 인물 랭킹(hot100-persons.html) 전용 ══════════ */

/* 상단(PC 1~4위 / 모바일 1~2위) — 세로 포스터 카드
   [2026-08-11 rev.7] 순위숫자 50%확대, SNS이름옆으로 이동, 우측상단에 조회수 골드,
   폰트굵기 조정(이름 900→700, 최근작품 얇게) */
.hp-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:32px}
.hp-card{cursor:pointer;min-width:0;text-decoration:none;color:inherit;display:block}
.hp-poster{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--bg3);margin-bottom:8px}
.hp-poster>img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.hp-poster-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--muted)}
/* 순위숫자 — 기존 44px의 150% = 66px
   [2026-08-23 rev.42] rev.41에서 position:absolute를 숫자 자신(.hp-rank-num)에서
   감싸는 wrap(.hp-rank-wrap)으로 옮겼었는데, hot100-persons-likes.html은 이 wrap 없이
   .hp-rank-num을 그대로 쓰고 있어서 그 페이지 1~4위 숫자가 위치를 잃고 사라지는 사고가
   있었음(hot100.css는 두 페이지 공용 파일). .hp-rank-num 자체는 원래대로 absolute를
   유지해서 옛 마크업(좋아요 페이지)도 그대로 정상 동작하게 하고, 새 마크업(.hp-rank-wrap로
   감싼 조회수 페이지)에서만 wrap이 absolute를 맡고 안쪽 숫자는 relative로 덮어씀 */
.hp-rank-num{position:absolute;top:6px;left:6px;font-family:var(--disp);font-size:66px;font-style:italic;
  color:#fff;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.9);z-index:2}
.hp-rank-num.r1{color:var(--gold)}
.hp-rank-wrap{position:absolute;top:6px;left:6px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.hp-rank-wrap .hp-rank-num{position:relative;top:auto;left:auto}
/* 조회수 — 사진 우측상단, 골드색, 볼드 없음 */
.hp-card-view{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:13px;
  color:var(--gold);font-weight:400;z-index:2;
  background:rgba(0,0,0,.55);border-radius:6px;padding:2px 6px;line-height:1.4}
/* 이름 줄 — 이름 + SNS 인라인, 가운데 정렬 */
.hp-name-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;min-width:0;margin-top:4px}
.hp-name{font-size:21px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}
/* 이름 옆 SNS 아이콘 — 20px */
.hp-card-sns-inline{display:inline-flex;gap:3px;flex-shrink:0}
.hp-card-sns-inline img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.hp-mbti{font-family:var(--mono);font-size:15px;color:var(--muted2);background:var(--bg3);padding:1px 5px;border-radius:4px;flex-shrink:0}
.hp-recent-work{font-size:14px;font-weight:400;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.hp-view{font-family:var(--mono);font-size:14px;font-weight:400;color:var(--muted);margin-top:3px;text-align:center}

/* 리스트(PC 5위부터 2열 / 모바일 3위부터 1열) — 사진+정보 가로형 카드, 배경 박스 있음
   [2026-08-11 rev.7] 이름 20px(1px축소), 조회수 볼드제거, MBTI CSS 제거 */
.hp-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.hp-row{display:flex;align-items:flex-start;gap:15px;background:var(--hp-row-bg);border-radius:12px;padding:12px;position:relative;
  text-decoration:none;color:inherit;min-width:0}
/* [2026-08-23 rev.42] rev.41 원복 — .hp-row-rank는 원래대로 width/margin-right 유지해서
   좋아요 페이지(옛 마크업, wrap 없음)도 그대로 정상 동작. 새 마크업(.hp-row-rank-wrap로
   감싼 조회수 페이지)에서만 wrap이 폭/여백을 맡고 안쪽 숫자는 그 값을 비움 */
.hp-row-rank{flex-shrink:0;width:30px;padding-top:2px;text-align:center;font-family:var(--disp);
  font-size:32px;font-style:italic;color:var(--text);line-height:1;margin-right:15px}
.hp-row-rank-wrap{flex-shrink:0;width:30px;margin-right:15px;display:flex;flex-direction:column;align-items:center;gap:2px}
.hp-row-rank-wrap .hp-row-rank{width:auto;margin-right:0;padding-top:0}
.hp-row-poster{position:relative;flex-shrink:0;width:67px;height:100px;border-radius:8px;overflow:hidden;background:var(--bg3)}
.hp-row-poster>img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.hp-row-poster-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--muted)}
.hp-row-info{flex:1;min-width:0;display:flex;flex-direction:column;padding-right:78px;min-height:100px;justify-content:center}
.hp-row-name-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;line-height:1.2}
.hp-row-name{font-size:19px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hp-row-sns-inline{display:inline-flex;gap:4px;flex-shrink:0}
.hp-row-sns-inline img{width:18px;height:18px;border-radius:50%;object-fit:cover}
.hp-row-name-en{font-size:13px;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-row-recent-work{font-size:14px;font-weight:400;color:#a0a0bc;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-row-corner{position:absolute;top:12px;right:14px;bottom:12px;text-align:right;display:flex;flex-direction:column;justify-content:space-between}
.hp-row-view-badge{font-family:var(--mono);font-size:15px;font-weight:400;color:var(--gold)}
.hp-row-profile-link{font-size:13px;color:var(--muted2);text-align:right}

/* ── 더보기/접기 버튼 (51~100위) ── */
.hh-more-btn{
  display:block; width:100%; margin-top:24px;
  padding:13px 0; border-radius:10px;
  border:1px solid rgba(229,9,20,0.35);
  background:rgba(229,9,20,0.07);
  color:#E50914; font-family:var(--sans); font-size:14px; font-weight:600;
  cursor:pointer; text-align:center; transition:all .15s;
}
.hh-more-btn:hover{ background:rgba(229,9,20,0.15); border-color:#E50914; }

/* 51~100위 숨김/표시 */
.hh-grid-more{ display:none; }
.hh-grid-more.open{ display:contents; }

/* ── 모바일 공통 ── */
@media (max-width:860px){
  /* 사이드바 숨김 */
  .hh-sidebar{ display:none; }
  /* hh-outer 모바일 패딩 */
  .hh-outer{ padding:16px 4px 60px; flex-direction:column; gap:0; }
  /* hp-outer 모바일 패딩 */
  .hp-outer{ padding:16px 4px 60px; flex-direction:column; gap:0; }

  /* [2026-08-23 rev.43] 인물 핫100 순위변동 모바일 크기 축소 — 1~2위(포스터카드) 16px,
     3~100위(리스트) 12px. PC는 이 규칙 영향 안 받음(미디어쿼리 밖 기본값 그대로) */
  .hh-chg{ font-size:16px; }
  .hh-chg.sm{ font-size:12px; }

  /* ── 작품 핫100 모바일 ── */
  .hh-top4{ grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
  .hh-top4-card:first-child{ aspect-ratio:16/8; }
  .hh-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
  .work-rank-num{ font-size:36px; }
  .hh-top4-rank{ font-size:44px; }
  /* [2026-08-20 수정] OTT 로고 축소 — 1~2위(hh-top4-ott) 32px, 3~100위(ott-logo) 26px */
  .hh-top4-ott img{ width:32px; height:32px; }
  .ott-logo{ width:26px; height:26px; }

  /* ── 인물 핫100 모바일 ── */
  /* 1~2위: 2열 포스터 */
  .hp-top{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

  /* 3위~: 리스트 1열 */
  .hp-list{ grid-template-columns:1fr; }

  /* [2026-08-13 정리] 카드 안 간격 3가지를 한 곳에 정리
     ① 카드 왼쪽 안쪽 여백 12→8px, 숫자 박스는 고정폭+가운데정렬→내용폭+왼쪽정렬로 바꿔서
        "박스 왼쪽 끝↔숫자" 사이 빈 공간 제거
     ② 숫자↔사진 간격: 카드 기본 간격(gap)은 0으로 지우고 숫자 오른쪽 여백만으로 5px 고정
     ③ 사진↔글자 간격은 기존대로 info의 padding-left(8px) 유지 */
  .hp-row{ padding-left:8px; gap:0px; }
  .hp-row-rank{ width:28px; font-size:24px; text-align:left; margin-right:5px; }
  /* [2026-08-23 rev.42] 새 마크업(.hp-row-rank-wrap)에서만 wrap이 폭/여백을 맡음 */
  .hp-row-rank-wrap{ width:28px; margin-right:5px; align-items:flex-start; }
  .hp-row-rank-wrap .hp-row-rank{ width:auto; margin-right:0; }

  /* [2026-08-13 신규] 모바일 1~2위 포스터 카드 이름 21→19px */
  .hp-name{ font-size:19px; }

  /* [2026-08-13 신규] 이름 두께 축소 + line-height 좁혀서 이름↔작품명 체감 간격 축소
     (line-height 기본값 1.6 때문에 margin-top 3px보다 실제로 더 떠보이던 문제) */
  .hp-name{ font-weight:600; line-height:1.2; }
  .hp-name-row{ line-height:1.2; }
  .hp-recent-work{ line-height:1.2; }
  .hp-row-poster{ margin-right:0px; }
  .hp-row-info{ padding-left:8px; }

  /* 이름 2px 작게 */
  .hp-row-name{ font-size:17px; }

  /* 조회수 1px 작게 */
  .hp-row-view-badge{ font-size:14px; }

  /* 프로필보기 1px 작게 */
  .hp-row-profile-link{ font-size:12px; }

  /* [2026-08-13 신규] 모바일 인물 사진 세로 100→80px (가로도 비율 그대로 67→54px) —
     그만큼 카드 안 여백이 줄어서 사진·글자가 상대적으로 더 커 보임 */
  .hp-row-poster{ width:54px; height:80px; }
  .hp-row-info{ min-height:80px; }
}

/* ══════════ FAQ 섹션 (공용, 2026-08-16 rev.38) ══════════
   넷플릭스 페이지 FAQ 스타일 그대로 재사용. hh-main/hp-main(id=hhMain) 안에 들어가므로
   사이드바 폭을 침범하지 않고 자동으로 콘텐츠 영역 안에서만 표시됨. */
.rank-section { margin-bottom:0 }
.sec-hd {
  display:flex; align-items:center; gap:12px;
  margin-bottom:20px; padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.sec-num {
  font-family:var(--disp); font-size:12px; color:#E50914 !important;
  background:rgba(229,9,20,0.18); border:1px solid rgba(229,9,20,0.35);
  padding:2px 10px; border-radius:4px; letter-spacing:2px; white-space:nowrap;
}
.sec-title {
  font-family:var(--disp); font-size:24px; letter-spacing:1.5px; color:var(--text);
}
.faq-section { margin-top:50px }
.faq-list { display:grid; grid-template-columns:1fr; gap:10px }
@media(min-width:769px) { .faq-list { grid-template-columns:1fr 1fr; gap:12px 16px } }
.faq-item {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
}
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 18px; background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--text);
  text-align:left;
}
.faq-q:hover { background:rgba(255,255,255,0.02) }
.faq-arrow {
  flex-shrink:0; font-family:var(--mono); color:var(--gold);
  transition:transform .2s; font-size:14px;
}
.faq-item.open .faq-arrow { transform:rotate(180deg) }
.faq-a {
  max-height:0; overflow:hidden; transition:max-height .25s ease, padding .25s ease;
  padding:0 18px; font-size:13px; line-height:1.7; color:var(--muted2);
  border-top:1px solid transparent;
}
.faq-item.open .faq-a {
  max-height:400px; padding:0 18px 16px; border-top:1px solid var(--border);
  padding-top:12px;
}