/* Netflix풍 다크 - 보조 스타일 */

html, body { scroll-behavior: smooth; }

.scroll-row {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 transparent;
}
.scroll-row::-webkit-scrollbar { height: 6px; }
.scroll-row::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
.scroll-row::-webkit-scrollbar-track { background: transparent; }

/* 카드 박스: 카드 자신의 높이는 부모(.card 또는 캐러셀 슬롯)가 정하고,
 * 너비는 이미지 자연 비율에 따라 height × ratio 로 동적 변경 (JS가 aspect-ratio 설정).
 * 비율 clip 범위 [0.6, 1.78] — 너무 좁거나 너무 넓은 이미지는 살짝 cover 자름.
 * 모든 카드의 높이가 같아서 한 행에서 시각적 정렬이 자연스럽고 letterbox 빈 공간 없음.
 */
.card {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;   /* 자식이 부모 너비로 stretch 되지 않게 */
  flex-shrink: 0;
}

/* 카드 박스: height 고정, width = height × 이미지 자연비율 (JS 가 aspect-ratio 설정).
 * width 를 auto 로 명시해 부모 stretch 의 영향을 받지 않게 한다. */
.card-thumb {
  position: relative;
  height: var(--thumb-h, 14rem);
  width: auto;
  aspect-ratio: 2 / 3;   /* 초기값 — JS 가 이미지 로드 후 자연 비율로 교체 */
  background: #0a0a0a;
  overflow: hidden;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  /* 박스 비율 == 이미지 자연 비율 이므로 cover/contain 결과가 같다.
   * 비율 적용 전 한 프레임에서도 잘림 방지: contain. */
  object-fit: contain;
  transition: transform 220ms ease;
  display: block;
}
.card:hover .card-thumb img { transform: scale(1.04); }

/* 카드 외부에서 강제할 thumb 높이 (캐러셀 / 그리드 별로 다름).
 * --thumb-h 변수로 내려서 .card-thumb 의 height 에 적용된다. */
.row-card  { --thumb-h: 14rem; }
.row-card .card-meta { max-width: 14rem; }
@media (min-width: 640px) { .row-card { --thumb-h: 17rem; } .row-card .card-meta { max-width: 17rem; } }
@media (min-width: 1024px) { .row-card { --thumb-h: 19rem; } .row-card .card-meta { max-width: 19rem; } }

.grid-card { --thumb-h: 14rem; }
.grid-card .card-meta { max-width: 14rem; }
@media (min-width: 640px) { .grid-card { --thumb-h: 17rem; } .grid-card .card-meta { max-width: 17rem; } }
@media (min-width: 1024px) { .grid-card { --thumb-h: 19rem; } .grid-card .card-meta { max-width: 19rem; } }

/* card-meta 는 thumb 아래에 있고, 너비는 위 카드 너비를 따라가지 않고 고정폭으로 두어
 * 가로형/세로형 카드 간 제목 너비가 들쭉날쭉하지 않게 함. 너무 좁은 카드는 두 줄로. */
.card-meta { word-break: keep-all; }

/* 에피소드 / 회차 카드 — TV 회차 썸네일은 가로형이 자연 (16:9 고정) */
.ep-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  border-radius: 0.375rem;
}
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; }
a:hover .ep-thumb img { transform: scale(1.04); }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skeleton {
  background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 0.375rem;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 플레이어 iframe 컨테이너 */
.player-wrap {
  aspect-ratio: 16 / 9;
  background: #000;
  width: 100%;
}
.player-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ---- TV 모드 (셋탑박스 리모컨) ------------------------------------------- */

/* 루트 폰트를 키우면 rem 기반 크기(카드 높이 포함)가 전부 함께 커진다.
 * 10-foot UI: TV 시청거리에서 읽히도록 전반적으로 확대. */
html.tv-mode { font-size: 19px; }

/* 오버스캔 안전 여백 — 구형 TV 는 화면 가장자리가 잘릴 수 있다 */
html.tv-mode body { padding: 1.5vh 1.5vw; }

/* 포커스 링: 리모컨 커서 역할이라 크고 명확하게 */
html.tv-mode a:focus,
html.tv-mode button:focus,
html.tv-mode input:focus,
html.tv-mode iframe:focus,
html.tv-mode [tabindex="0"]:focus {
  outline: 3px solid #ef4444;
  outline-offset: 3px;
  border-radius: 0.375rem;
  z-index: 1;
}

/* 카드 포커스 = hover 와 동일한 시각 피드백 */
html.tv-mode .card:focus .card-thumb img,
html.tv-mode a:focus .ep-thumb img { transform: scale(1.04); }
html.tv-mode .card:focus .card-thumb { box-shadow: 0 0 0 1px #ef4444; }

/* TV 브라우저에서 스크롤바는 시각 노이즈 — 숨김 (스크롤은 포커스 이동이 대신) */
html.tv-mode .scroll-row { scrollbar-width: none; }
html.tv-mode .scroll-row::-webkit-scrollbar { display: none; }

/* TV 모드 안내 토스트 — 시청거리에서 읽히도록 크고 대비 높게 */
.tv-hint {
  position: fixed;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%) translateY(20px);
  max-width: min(90vw, 46rem);
  background: rgba(24, 24, 27, 0.96);
  border: 2px solid #ef4444;
  border-radius: 0.75rem;
  color: #fafafa;
  font-size: 1.05rem;
  line-height: 1.55;
  padding: 0.9rem 1.3rem;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease, transform 250ms ease;
  word-break: keep-all;
}
.tv-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }