/* scene-tab.css — V13.1 씬탭 모바일 재설계 (넷플릭스 문법 + 깊이 분리)
   ────────────────────────────────────────────────────────────
   V13.0 은 같은 크기 가로 레일 3개를 세로로 쌓아 위계가 없었고, 카드가 84px 로 작아
   한 화면에 5장만 보이고 아래가 통째로 비었다. 여기서는 카드 «모양»을 층마다 바꾼다 —
   히어로(전체 폭) → 이어보기(와이드) → 랭킹(포스터+번호) → 그리드(2열).

   ★변수는 style.css 의 것을 쓴다. 씬탭만 다른 팔레트를 만들지 않는다.
   ★모든 클래스는 .sc- 접두사(구 iframe 페이지의 .scene-* 와 충돌 방지). */

/* ★스크롤은 «문서»가 한다 — 씬탭만 자체 스크롤 컨테이너면 안 된다.
   .screen 공통 규칙이 overflow-y: visible / height: auto 라 홈·소설·영상은 전부
   문서 스크롤바를 쓴다. 여기에만 overflow-y:auto 를 걸었더니 씬탭에서만
   스크롤바가 화면 «안쪽»에 붙었고, 그 15px 이 콘텐츠 폭을 먹어
   100vw 로 계산한 카드 폭이 어긋났다(PC 에서 2.5장 → 2.6장).
   모바일은 오버레이 스크롤바(폭 0)라 드러나지 않았다.
   문서 스크롤로 돌리면 모바일 주소창 자동 숨김도 되살아난다.
   ※.sc-detail / .sc-all 은 position:fixed 오버레이라 자체 스크롤이 맞다. */
#screen-scene { background: var(--bg, #0A0908); }
.sc-feed { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ── 카드 폭: 화면에 «몇 장 보일지»로 정한다 ─────────────
   고정 px(116) 이면 360·375·414 에서 보이는 장수가 제각각이 된다.
   넷플릭스는 수천 편에서 «고르게» 하려고 밀도를 높이지만, 우리는 57편뿐이고
   이미지 자체가 상품이라 밀도보다 크기가 맞다. 반 장이 걸쳐 보여야
   «옆에 더 있다»가 눌러보지 않아도 읽힌다.

   n장 = n·W + (ceil(n)-1)·gap 이 (100vw − 왼쪽 패딩) 에 들어차야 한다.
   포스터 2.5장 → W = (100vw − 16 − 2·10) / 2.5   (375px 에서 약 136px) */
:root {
  /* ★앱 공통 세리프를 씬탭으로 들여온다.
     씬탭만 시스템 산세리프라 «같은 앱의 다른 화면»처럼 보였다.
     한글 제목은 Noto Serif KR, 숫자는 Playfair Display(라틴 전용이라 한글은 자동 폴백).
     ※한글엔 이탤릭이 없어 faux-italic 이 되므로 기울이지 않는다 — 대신 자간과 색으로 대비를 준다. */
  --sc-serif: 'Noto Serif KR', 'Playfair Display', Georgia, serif;
  --sc-serif-num: 'Playfair Display', Georgia, serif;

  /* ★금색은 앱 토큰(style.css)을 그대로 쓴다. 씬탭만 다른 금색(#D4A55A)을 쓰고 있었다. */
  --brass:       var(--color-accent, #C89B4A);
  --brass-light: var(--color-accent-light, #E2BA6B);
  --brass-dark:  var(--color-accent-dark, #9E7832);

  --sc-pad: 16px;
  --sc-gap: 10px;
  /* 폴백 — 컨테이너 쿼리를 못 쓰는 브라우저 */
  /* ★V13.8 세 종류를 «같은 2.5장»으로 통일했다.
     전에는 상황 1.6 / 이어보기 1.8 로 넓었는데, 그건 카드가 가로(16:10 · 16:9)였기 때문이다.
     세로 2:3 으로 바꾸면서 1.6장을 유지하면 카드 하나가 284×426 — 화면 절반이 된다.
     폭이 같아진 만큼 «인물 / 상황» 구분은 비율이 아니라 라틴 캡션과 부제가 맡는다. */
  --sc-poster-w: calc((100vw - var(--sc-pad) - var(--sc-gap) * 2) / 2.5);
  --sc-wide-w:   calc((100vw - var(--sc-pad) - var(--sc-gap) * 2) / 2.5);
  --sc-cont-w:   calc((100vw - var(--sc-pad) - var(--sc-gap) * 2) / 2.5);
}

/* ★기준은 «뷰포트»가 아니라 «콘텐츠 폭»이다.
   앱 셸(.app)이 데스크톱에서 480px 로 좁혀지는데 100vw 는 1280px 이라,
   뷰포트로 재면 PC 에서만 2.5장이 2.7장이 된다(실측). 컨테이너 기준으로 잰다. */
/* ※컨테이너는 «부모»에 둔다 — cqw 는 컨테이너 자손에서만 유효하다.
   .sc-feed 자신에 container-type 과 cqw 를 같이 걸면 자기 참조라 무시된다(실측). */
#screen-scene { container-type: inline-size; }
.sc-feed {
  --sc-poster-w: calc((100cqw - var(--sc-pad) - var(--sc-gap) * 2) / 2.5);
  --sc-wide-w:   calc((100cqw - var(--sc-pad) - var(--sc-gap) * 2) / 2.5);
  --sc-cont-w:   calc((100cqw - var(--sc-pad) - var(--sc-gap) * 2) / 2.5);
}
/* 넓은 컨테이너에서 카드가 과하게 커지지 않게 상한 — 여기도 컨테이너 기준이다 */
@container (min-width: 560px) {
  .sc-feed { --sc-poster-w: 178px; --sc-wide-w: 178px; --sc-cont-w: 178px; }
}

/* ── 상단 헤더 ───────────────────────────────
   ★sticky + 음수 margin 으로 «자리를 차지하지 않고» 히어로 위에 얹는다.
     position:fixed 를 쓰면 앱 셸(데스크톱 480px)을 벗어나 화면 전체 폭이 된다.
   ★배경은 스크롤해서 히어로를 지난 뒤에만 붙인다(.solid) — 처음부터 깔면 사진을 가린다. */
.sc-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px; margin-bottom: -56px;   /* 높이만큼 당겨 자리를 0 으로 */
  transition: background .2s ease;
  border-bottom: 0;                                 /* 브라스 라인과 «두 줄»로 겹친다 */
}
/* 브라스 라인은 헤더의 «자식»이어야 한다 —
   형제 div 로 두면 margin-bottom:-56px 때문에 위로 끌려 올라가고 sticky 도 안 따라온다.
   sticky 는 positioned 라 ::after 의 absolute 기준이 된다. */
.sc-head::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--brass, #C89B4A), transparent 60%);
}
.sc-head.solid {
  background: color-mix(in srgb, var(--bg, #0A0908) 93%, transparent);
  backdrop-filter: blur(10px);
}
.sc-head-l { display: flex; align-items: baseline; gap: 10px; }
.sc-head-div { width: 1px; height: 12px; background: #3A332B; display: block; }
.sc-head-lat {
  font-family: var(--sc-serif-num); font-size: 11px; letter-spacing: .22em;
  color: var(--faint, #6B645C);
}
.sc-head-r { display: flex; align-items: center; gap: 16px; }
@media (prefers-reduced-motion: reduce) { .sc-head { transition: none; } }
.sc-head-t {
  font-family: var(--sc-serif); font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.sc-head.solid .sc-head-t { text-shadow: none; }
/* 알약 → 텍스트. 이미지 위에 떠 있는 유리 버튼이 히어로와 싸웠다.
   터치 타깃은 min-height 로 지킨다(패딩을 없앤 대가). */
.sc-head-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 750;
  padding: 0; border-radius: 0; position: relative;
  background: none; border: 0;
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
/* ★터치 타깃을 min-height 로 잡으면 헤더가 56→70px 로 커지고,
   margin-bottom:-56px 이 그만큼을 못 당겨 히어로가 14px 밀려 내려간다(실측).
   높이는 글자가 정하게 두고, 누를 수 있는 면적만 밖으로 넓힌다. */
.sc-head-btn::after {
  content: ''; position: absolute; left: -12px; right: -12px; top: -14px; bottom: -14px;
}
.sc-head.solid .sc-head-btn {
  background: none; color: var(--text, #E8DFD4); text-shadow: none;
}
.sc-head-btn i { font-style: normal; font-size: 13px; color: var(--brass-light, #E2BA6B); }

/* 히어로 배지가 헤더와 겹치지 않게 아래로.
   ★52px 이면 브라스 라인(헤더 바닥 ≈59px)을 4px 침범한다 — 라인이 배지 글자를 가로지른다(실측). */
.sc-hero-tag { top: 72px !important; }

/* ── 정렬 토글 (인물 전체 보기) ──────────────── */
.sc-sorts {
  display: flex; gap: 7px; padding: 12px 16px 4px;
  overflow-x: auto; scrollbar-width: none;
}
.sc-sorts::-webkit-scrollbar { display: none; }
.sc-sorts button {
  flex: 0 0 auto; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 750; padding: 7px 13px; border-radius: 999px;
  background: var(--raise, #1C1917); border: 1px solid var(--line, #2B2724); color: var(--muted, #B8A990);
}
.sc-sorts button.on {
  background: var(--brass, #C89B4A); border-color: transparent; color: #1a1409;
}

/* 자음 인덱스 — 가나다순일 때만 */
.sc-idx {
  padding: 18px 16px 8px; font-family: var(--sc-serif);
  font-size: 13px; font-weight: 700; color: var(--brass, #C89B4A); letter-spacing: .06em;
}
.sc-idx:first-child { padding-top: 6px; }

/* ── 섹션 제목 ───────────────────────────────
   제목은 «이 줄이 왜 있는지»를 말하는 자리다. 전부 같은 굵기로 두면
   «랭킹»과 «상황별»의 무게가 같아져 위계가 사라진다.
   세리프 제목 + 왼쪽 brass 앵커로 줄의 시작을 분명히 하고,
   수량은 제목에 인라인으로 붙여 한 덩어리로 읽히게 한다. */
.sc-sect { margin-top: 28px; }
/* ★V13.8 카드 비율이 전부 세로로 같아지면서 «모양»으로 만들던 층 구분이 사라졌다.
   그 일을 타이포가 대신한다 — 제목 위 라틴 캡션 한 줄. brass 앵커는 뺀다(캡션과 겹친다). */
.sc-sect-head {
  display: block;
  padding: 0 18px 12px;
}
.sc-sect-cap {
  font-family: var(--sc-serif-num); font-size: 10px; letter-spacing: .24em;
  color: var(--faint, #6B645C); margin-bottom: 6px;
}
.sc-sect-l { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sc-sect-t {
  font-family: var(--sc-serif); font-size: 18px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 수량은 제목 옆 인라인 — 산세리프로 남겨 세리프 제목과 대비를 준다 */
.sc-sect-t em {
  font-style: normal; font-family: var(--sans, inherit);
  font-size: 11.5px; font-weight: 700; color: var(--faint, #6B645C); margin-left: 8px;
}
/* «전체 ›» — 넘치는 줄에만. 끝까지 스크롤하지 않아도 눌러진다. */
.sc-sect-more {
  flex: 0 0 auto; background: none; border: 0; padding: 4px 0 4px 8px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 750; color: var(--faint, #6B645C);
  white-space: nowrap;
}
.sc-sect-more i { font-style: normal; color: var(--brass, #C89B4A); margin-left: 3px; font-size: 14px; }

/* 가로 레일 — 스크롤바 숨김, 스냅으로 카드가 반쯤 걸리지 않게 */
.sc-rail {
  display: flex; gap: var(--sc-gap); padding: 0 var(--sc-pad) 2px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.sc-rail::-webkit-scrollbar { display: none; }
.sc-rail > * { scroll-snap-align: start; }

/* ── ① 히어로 캐러셀 ─────────────────────────
   ★스와이프를 손으로 구현하지 않는다. 홈 히어로는 pointer capture 로 직접 제어하는데,
     씬 히어로에는 «1화 무료로 보기» 버튼이 있어서 제스처 추적이 클릭을 가로챌 위험이 있다.
     CSS 스크롤 스냅은 브라우저가 처리하므로 버튼 클릭과 충돌하지 않는다.
   ★자동 회전은 두지 않는다. 결제 버튼을 누르려는 순간 슬라이드가 바뀌면
     «엉뚱한 시리즈를 결제»하게 된다(홈은 카드 전체 탭이라 덜 위험하다). */
.sc-hero-track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* 좌우 끝에서 브라우저 뒤로가기 제스처를 막는다 */
}
.sc-hero-track::-webkit-scrollbar { display: none; }
.sc-hero-track > .sc-hero { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }

.sc-hero-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; }
.sc-hero-dot {
  width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #3A332B; transition: width .2s ease, background .2s ease;
}
.sc-hero-dot.on { width: 18px; border-radius: 3px; background: var(--brass, #C89B4A); }
@media (prefers-reduced-motion: reduce) { .sc-hero-dot { transition: none; } }

.sc-hero { position: relative; height: 68vh; min-height: 420px; max-height: 540px; overflow: hidden; }
/* ★히어로만 object-position 을 쓴다. 여기는 잘림이 37% 라 기본값(center)이면 머리가 잘린다.
   카드(2:3)는 잘림이 15.6% 뿐이라 굳이 올릴 필요가 없다 — 축이 다르다. */
.sc-hero > img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: center 12%; }
/* 위·아래 두 겹. 위는 상태바 영역 정리용, 아래는 글자 가독용.
   한 겹으로 아래만 깔면 상단 밝은 이미지에서 시간·배터리가 묻힌다. */
.sc-hero-sc {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.62) 0%, rgba(10,9,8,.15) 14%, transparent 30%),
    linear-gradient(180deg, transparent 42%, rgba(10,9,8,.6) 66%, rgba(10,9,8,.95) 87%, var(--bg, #0A0908) 100%);
}
/* 중앙 정렬을 버렸다 — 짧은 이름 하나가 가운데 떠 있으면 허전하다.
   왼쪽 정렬로 «부제 → 이름 → 정보 → 행동» 이 한 축에 쌓이게 한다. */
.sc-hero-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 18px; }
/* 이름 앞에 «누구인지»를 먼저 말한다. 한글엔 이탤릭이 없으므로 기울이지 않고
   자간과 색으로 대비를 준다(faux-italic 은 획이 뭉개진다). */
.sc-hero-sub {
  font-family: var(--sc-serif); font-size: 13px; font-weight: 500;
  color: var(--brass-light, #E2BA6B); letter-spacing: .04em; margin-bottom: 5px;
}
.sc-hero-nm {
  font-family: var(--sc-serif); font-size: 36px; font-weight: 700;
  letter-spacing: -.035em; line-height: 1.02; color: #fff;
}
/* 정보는 · 로 끊은 3점. 무료만 색을 줘서 눈이 거기 먼저 간다. */
.sc-hero-mt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 11px; font-size: 11.5px; color: #bdb3a2; font-weight: 600;
}
.sc-hero-mt .dot { width: 2.5px; height: 2.5px; border-radius: 50%; background: #6B645C; flex: 0 0 2.5px; }
.sc-hero-mt .free { color: var(--brass-light, #E2BA6B); font-weight: 800; }
/* 같은 폭이면 어느 게 주된 행동인지 안 보인다. 1.9 : 1 로 가른다. */
.sc-hero-bt { display: grid; grid-template-columns: 1.9fr 1fr; gap: 8px; margin-top: 16px; }
.sc-hero-bt button {
  padding: 14px 10px; border: 0; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em;
}
.sc-hero-bt .p { background: #F0EBE2; color: #0A0908; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.sc-hero-bt .s { background: transparent; color: #fff; border: 1px solid #4A4139; }
/* 히어로가 화면을 꽉 채우므로 «아래에 더 있다»를 말해 줘야 한다 */
.sc-hero-hint {
  text-align: center; margin-top: 13px; font-size: 9.5px; letter-spacing: .14em;
  color: #5D5548; font-weight: 700;
}
/* 배지를 알약에서 라인으로 — 이미지 위에 얹는 요소는 가벼울수록 좋다 */
.sc-hero-tag {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sc-serif-num);
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  color: var(--brass-light, #E2BA6B);
}
.sc-hero-tag::before { content: ''; width: 16px; height: 1px; background: var(--brass, #C89B4A); }

/* ── ② 이어보기 — 와이드 + 진도 ────────────── */
.sc-cont { flex: 0 0 var(--sc-cont-w); background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: inherit; color: inherit; }
.sc-cont-th { position: relative; border-radius: 8px; overflow: hidden; background: #141110; }
/* ★원본이 1080×1920(9:16) 이라 16:9 로 담으면 세로의 68% 가 날아가고 «얼굴이 아니라 상체»만 남았다.
   4:5 면 잘림이 30% 로 떨어진다. object-position 은 건드리지 않는다 —
   전신 서 있는 구도라 기본값(center)이 발까지 살리고, 위로 올리면 천장만 더 보인다(실측). */
.sc-cont-th > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.sc-cont-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.5);
  border: 1.5px solid rgba(255,255,255,.85); color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.sc-pb { height: 2px; background: #2B2724; }
.sc-pb i { display: block; height: 100%; background: var(--brass, #C89B4A); }
.sc-cont-m { padding: 8px 2px 0; }
.sc-cont-n { font-size: 13.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cont-e { font-size: 11.5px; color: var(--faint, #6B645C); margin-top: 3px; }
/* V13.15 새 화 도착 — 이어보기 메타 줄이 그걸 먼저 말할 때의 강조 */
.sc-cont-e.new { color: var(--brass, #C89B4A); font-weight: 700; }

/* ── ③ 랭킹 포스터 — 깊이 있는 시리즈 ──────── */
.sc-rank { flex: 0 0 var(--sc-poster-w); background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: inherit; color: inherit; position: relative; }
.sc-rank-th { position: relative; }
.sc-rank-th > img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; display: block;
  border: 1px solid var(--line, #2B2724); background: #141110;
}
.sc-rank-n { font-size: 13.5px; font-weight: 750; margin-top: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rank-e { font-size: 11.5px; color: var(--faint, #6B645C); margin-top: 3px; }

/* ── 랭킹 번호 — 포스터 «바깥»에 세운다 ───────
   전에는 좌상단에 겹쳐서 얼굴(이미지에서 가장 중요한 부분)을 가렸다.
   숫자를 밖으로 빼면 이미지가 온전해지고 숫자를 훨씬 크게 쓸 수 있다.
   Playfair Display 는 라틴 전용이라 숫자에만 깨끗하게 적용된다. */
.sc-rank.ranked { flex-basis: auto; }
.sc-rank-row { display: flex; align-items: flex-end; }
.sc-rank-row .sc-rank-th { flex: 0 0 var(--sc-poster-w); position: relative; z-index: 2; }
.sc-rank-no {
  font-family: var(--sc-serif-num); font-size: 92px; font-weight: 700;
  line-height: .76; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px var(--brass-dark, #9E7832);
  margin-right: -14px;                 /* 포스터와 살짝만 겹친다 */
  flex: 0 0 auto; position: relative; z-index: 1;
  font-variant-numeric: lining-nums tabular-nums;
  user-select: none;
}
/* 두 자리(10위)는 폭이 두 배라 겹침을 더 준다 */
.sc-rank-no.two { font-size: 78px; margin-right: -18px; letter-spacing: -.08em; }

/* ── ④ 2열 그리드 ──────────────────────────── */
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 0 16px; }
/* ★피드 안의 단편만 3열이다. 높이 때문이 아니라 «위계» 때문이다 —
   2열이면 단편 카드가 218px 로 인물 포스터(178px)보다 커져
   시리즈 46개짜리 화면이 «단편 쇼케이스»로 읽힌다. 전체 보기는 2열 그대로 둔다. */
.sc-grid.tri { grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sc-g { position: relative; border-radius: 8px; overflow: hidden; background: #141110;
  border: 0; padding: 0; cursor: pointer; font-family: inherit; color: inherit; display: block; }
.sc-g > img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
/* .wide 는 서버가 card:'wide' 를 계속 내려주므로 클래스는 남기고 값만 맞춘다 */
.sc-g.wide > img { aspect-ratio: 2 / 3; }
.sc-grid.tri .sc-g-t { font-size: 11.5px; }
.sc-grid.tri .sc-g-ov { padding: 18px 7px 7px; }
.sc-grid.tri .sc-g-s { font-size: 9.5px; }
.sc-g-ov {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 10px 9px; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.93));
}
.sc-g-t { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-g-s { font-size: 10.5px; color: #bdb3a2; margin-top: 3px; }

/* 배지 — 카드가 세로로 커진 만큼 알약이 무겁다. 배경을 빼고 밑줄만 남긴다.
   ★★배경을 빼면 밝은 이미지 위에서 글자가 묻힌다. 썸네일 61장 × 배지 자리 2곳을 재보니
     text-shadow 만으로는 244건 중 96건이 대비 3.0 미만이었다(최악 1.11 — ea12 「무료」).
     그래서 두 가지를 같이 한다:
       ① 글자는 흰색으로. 색 정체성은 «밑줄»이 맡는다(연녹·금색 글자는 밝은 사진에서 사라진다).
       ② 카드 위쪽에 스크림을 깐다 — 알약을 되살리지 않고 바탕만 어둡게 한다. */
.sc-pill { position: absolute; top: 8px; z-index: 2; font-size: 9.5px; font-weight: 800;
  padding: 0 0 2px; border-radius: 0; letter-spacing: .08em; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.45);
  text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.sc-pill.free { left: 8px;  border-bottom-color: #7FB069; }
.sc-pill.gold { left: 8px;  border-bottom-color: #D9A441; }
.sc-pill.cnt  { right: 8px; }
.sc-pill.lock { right: 8px; border-bottom-color: var(--brass, #C89B4A); }
.sc-pill.own  { left: 8px;  border-bottom-color: rgba(255,255,255,.3); }
/* V25 가격 선노출 — «탭했을 때 돈이 드는 카드에는 탭 전에 가격이 보인다».
   우측=가격(브라스 밑줄). 그리드는 우측을 cnt 가 쓰므로 .left 변형이 좌측을 쓴다. */
.sc-pill.price { right: 8px; border-bottom-color: var(--brass, #C89B4A); }
.sc-pill.price.left { right: auto; left: 8px; }
.sc-cont-e .pr { color: var(--brass, #C89B4A); font-weight: 700; }

/* 배지 뒤 스크림 — 이미지 위쪽만. 밑에서 올라오는 제목 그라데이션(.sc-g-ov)과 짝이다. */
.sc-rank-th::before, .sc-wide-th::before, .sc-cont-th::before, .sc-g::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,.55) 30px, transparent);
  pointer-events: none;
}
/* .sc-rank-th 만 overflow:hidden 이 없다(이미지 자신이 라운드를 갖는다) */
.sc-rank-th::before { border-radius: 8px 8px 0 0; }
/* 랭킹 번호가 포스터 밖으로 나가면서 좌상단이 비었다 — 배지를 원위치로 둔다 */

/* ── ⑤ 와이드 카드 (상황 레일) ───────────────
   ★«16:10 이라 인물 포스터와 한눈에 구분된다»고 썼었는데, 그 구분의 대가가
     세로 65% 손실이었다(실사 6장 중 5장에서 얼굴이 사라졌다).
     구분은 이미지가 아니라 SITUATIONS 캡션과 부제가 맡는다. */
.sc-wide { flex: 0 0 var(--sc-wide-w); background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; color: inherit; text-align: left; }
.sc-wide-th { position: relative; border-radius: 8px; overflow: hidden; background: #141110; }
.sc-wide-th > img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }



/* ── 전체 보기 화면 ─────────────────────────── */
.sc-all {
  position: fixed; inset: 0;
  /* PC: 앱 셸(480px) 안에 머문다 — fixed 는 .app(relative) 에 안 갇힌다.
     margin-inline:auto 로 가운데 둔다(transform 슬라이드 애니메이션과 충돌하지 않는다). */
  max-width: var(--shell-max, 480px); margin-inline: auto; z-index: 62; background: var(--bg, #0A0908);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(100%); transition: transform .24s cubic-bezier(.32,.72,0,1);
  visibility: hidden;
}
.sc-all.open { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .sc-all { transition: none; } }
.sc-all-hd {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: color-mix(in srgb, var(--bg, #0A0908) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft, #1F1B19);
}
.sc-all-t { font-family: var(--sc-serif); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.sc-all-t em { font-style: normal; font-family: var(--sans, inherit); font-size: 11.5px;
  font-weight: 700; color: var(--faint, #7A6C5B); margin-left: 8px; }
.sc-back.plain { position: static; background: none; backdrop-filter: none; width: 30px; height: 30px; line-height: 30px; }
.sc-all-body { padding: 14px 0 calc(40px + env(safe-area-inset-bottom, 0px)); }

/* ── 시리즈 상세 (전체 화면) ────────────────── */
.sc-detail {
  position: fixed; inset: 0;
  /* PC: 앱 셸(480px) 안에 머문다 — fixed 는 .app(relative) 에 안 갇힌다.
     margin-inline:auto 로 가운데 둔다(transform 슬라이드 애니메이션과 충돌하지 않는다). */
  max-width: var(--shell-max, 480px); margin-inline: auto; z-index: 60; background: var(--bg, #0A0908);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(100%); transition: transform .26s cubic-bezier(.32,.72,0,1);
  visibility: hidden;
}
.sc-detail.open { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .sc-detail { transition: none; } }

.sc-dhero { position: relative; height: 300px; overflow: hidden; }
.sc-dhero img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: center 16%; }
.sc-dhero-ov {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 16px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.95));
}
.sc-hero-nm2 { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.035em; }
.sc-hero-rl { font-size: 12.5px; color: var(--brass, #C89B4A); font-weight: 700; margin-top: 4px; }
.sc-hero-st { font-size: 11.5px; color: #a89e8c; margin-top: 8px; }
.sc-back {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.5); color: #fff; font-size: 21px; line-height: 36px; padding: 0;
  backdrop-filter: blur(6px);
}
.sc-hero-tag2 {
  position: absolute; top: 16px; right: 16px; z-index: 2; font-size: 10px; font-weight: 800;
  background: rgba(127,176,105,.92); color: #08140a; padding: 4px 10px; border-radius: 999px;
}

.sc-eps { padding: 8px 16px 0; }
.sc-ep {
  display: flex; gap: 12px; align-items: center; width: 100%;
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-soft, #1F1B19);
  background: none; cursor: pointer; text-align: left; font-family: inherit; color: inherit;
}
.sc-ep:last-child { border-bottom: 0; }
.sc-ep-th { width: 50px; height: 66px; border-radius: 7px; object-fit: cover; flex: 0 0 50px;
  border: 1px solid var(--line, #2B2724); background: #141110; }
.sc-ep-tx { flex: 1; min-width: 0; }
.sc-ep-n1 { font-size: 13.5px; font-weight: 750; color: var(--text, #F0EBE2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ep-n2 { font-size: 11px; color: var(--muted, #9A9187); margin-top: 3px; }
.sc-ep-st { font-size: 11.5px; font-weight: 800; flex: 0 0 auto; text-align: right; }
.sc-ep-st.free { color: #7FB069; }
.sc-ep-st.own  { color: var(--faint, #6B645C); }
.sc-ep-st.lock { color: var(--brass, #C89B4A); }
.sc-ep-st .g { display: block; font-size: 9px; color: #D9A441; font-weight: 800; margin-top: 2px; }

.sc-meet-wrap { padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.sc-meet {
  display: block; width: 100%; padding: 15px; border: 0; border-radius: 13px; cursor: pointer;
  background: linear-gradient(135deg, #C89B4A, #8A6E36); color: #1a1409; font-family: inherit; text-align: center;
}
.sc-meet-1 { font-size: 15px; font-weight: 800; }
.sc-meet-2 { font-size: 11.5px; font-weight: 700; opacity: .74; margin-top: 3px; }

/* ── 재생 후 전환 ───────────────────────────── */
.sc-after { position: fixed; inset: 0; z-index: 70; display: none;
  align-items: center; justify-content: center; padding: 0 28px; text-align: center; }
.sc-after.open { display: flex; }
.sc-after-bg { position: absolute; inset: 0; background: rgba(6,5,4,.93); }
.sc-after-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .24; }
.sc-after-in { position: relative; width: 100%; max-width: 340px; }
.sc-after-1 { font-size: 11px; color: var(--brass, #C89B4A); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sc-after-av { width: 68px; height: 68px; border-radius: 50%; object-fit: cover;
  margin: 15px 0 12px; border: 2px solid var(--brass, #C89B4A); }
.sc-after-2 { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.45; }
.sc-after-3 { font-size: 12px; color: #a89e8c; margin-top: 9px; line-height: 1.65; }
.sc-after-btns { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.sc-ab { padding: 14px; border-radius: 11px; border: 0; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 800; }
.sc-ab.main { background: linear-gradient(135deg, #C89B4A, #8A6E36); color: #1a1409; }
.sc-ab.ghost { background: rgba(255,255,255,.08); color: #e6ddcc; border: 1px solid rgba(255,255,255,.14); }
.sc-after-cd { font-size: 11px; color: #6B645C; margin-top: 14px; }

/* ── 재생기 ─────────────────────────────────── */
.sc-player { position: fixed; inset: 0; z-index: 65; background: #000; display: none; }
.sc-player.open { display: block; }
.sc-player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.sc-player-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 20px; line-height: 38px; padding: 0;
}

/* ── 빈 상태 / 로딩 ─────────────────────────── */
.sc-empty { padding: 44px 16px; text-align: center; color: var(--muted, #9A9187); font-size: 13.5px; line-height: 1.75; }
/* ★스켈레톤은 히어로·카드와 «같은 값»이어야 한다. 어긋나면 로딩 → 렌더에서 화면이 튄다. */
.sc-skel-hero { height: 68vh; min-height: 420px; max-height: 540px; background: #14110F;
  animation: sc-pulse 1.3s ease-in-out infinite; }
.sc-skel { padding: 0 16px; display: flex; gap: 10px; }
.sc-skel i { flex: 0 0 var(--sc-poster-w); aspect-ratio: 2 / 3; border-radius: 8px; background: #17130e; display: block;
  animation: sc-pulse 1.3s ease-in-out infinite; }
@keyframes sc-pulse { 0%,100% { opacity: .5 } 50% { opacity: .85 } }
@media (prefers-reduced-motion: reduce) { .sc-skel i, .sc-skel-hero { animation: none } }

/* ★열 수도 «뷰포트»가 아니라 «콘텐츠 폭» 기준이어야 한다.
   전에는 @media(min-width:640px) 라, PC 에서 셸이 480px 인데도 3열이 되어
   카드가 142px 로 쪼그라들었다(실측). 카드 폭만 컨테이너 쿼리로 고치고
   열 수는 안 고친 잔재였다. 셸이 480 이므로 이 조건은 셸이 넓어질 때만 걸린다. */
@container (min-width: 640px) {
  .sc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) {
  .sc-hero, .sc-skel-hero { max-height: 580px; }
}

/* ── ★보관함 (V13.10) ────────────────────────────────
   진입은 헤더 우측 버튼. 본문은 .sc-all 오버레이를 재사용한다(인물 전체와 같은 껍데기).
   여기 있는 건 «보관함 안의 카드»와 «스와이프 덱» 뿐이다. */
/* 스와이프 덱 — 세로 스냅. PC 에서는 .sc-all 과 같이 앱 셸 안에 머문다
   (.sc-player 는 전체화면이지만 저긴 단일 영상이고, 여긴 세로 씬을 넘기는 화면이다). */
.sc-deck {
  position: fixed; inset: 0; z-index: 66; background: #000; display: none;
  max-width: var(--shell-max, 480px); margin-inline: auto;
}
.sc-deck.open { display: block; }
.sc-deck-track { position: absolute; inset: 0; overflow-y: auto;
  scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sc-deck-track::-webkit-scrollbar { display: none; }
.sc-slide { height: 100%; min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; display: flex; align-items: center; justify-content: center; background: #000; }
.sc-slide > video, .sc-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-slide-sh { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.88) 6%, transparent 42%); }
.sc-slide-b { position: absolute; left: 18px; right: 18px; bottom: 26px; }
.sc-slide-t { font-family: var(--sc-serif); font-size: 19px; font-weight: 700; color: #fff; }
.sc-slide-s { font-size: 12px; color: #b5ada2; margin-top: 5px; }
.sc-deck-x { position: absolute; top: 14px; right: 16px; z-index: 3; background: rgba(0,0,0,.45);
  border: 0; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 19px; cursor: pointer; }
.sc-deck-i { position: absolute; top: 18px; left: 18px; z-index: 3; font-size: 11px; color: #cfc7bb;
  background: rgba(0,0,0,.4); padding: 4px 9px; border-radius: 99px; }
/* V24.7 보관함 덱 소리 아이콘 — 닫기(✕) 왼쪽, 같은 32px 원형 계열 (유튜브 쇼츠 문법).
   ※V24.6 의 좌하단 텍스트 배지는 슬라이드 제목(.sc-slide-b: left18/bottom26)과
   정확히 겹쳐서 폐기. 발견성은 열림 시 2.5초 힌트(#scDeckHint)가 담당한다. */
#scDeckSound { position: absolute; top: 14px; right: 56px; z-index: 3; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.45); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; }
#scDeckSound svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
#scDeckSound svg polygon { fill: #fff; stroke: none; }
#scDeckSound.on { background: rgba(200,155,74,.9); }
#scDeckSound.on svg { stroke: #140F07; }
#scDeckSound.on svg polygon { fill: #140F07; }
#scDeckHint { position: absolute; top: 20px; right: 96px; z-index: 3; font-size: 11px; color: #fff;
  background: rgba(0,0,0,.55); padding: 5px 10px; border-radius: 99px; white-space: nowrap;
  opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
#scDeckHint.in { opacity: 1; transform: translateX(0); }
/* 상시 전환 버튼 — 마지막 장 카드 대신. 한 줄로 이으면 «끝나는 순간»이 없어
   카드를 놓을 자리가 없고, 인물 경계마다 끼우면 방해물이 된다(45묶음 중 22개가 1편). */
.sc-slide-go {
  position: absolute; right: 16px; bottom: 26px; z-index: 2;
  background: rgba(200,155,74,.92); color: #140F07; border: 0; border-radius: 999px;
  padding: 10px 15px; font-family: inherit; font-size: 12.5px; font-weight: 800;
  cursor: pointer; backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  max-width: 52%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 제목 줄이 버튼과 겹치지 않게 오른쪽을 비운다 */
.sc-slide-b { padding-right: 54%; }