/* 메인 페이지 — AI Films & Shorts를 포탈 밖 전체 폭(1760px) 5×2 그리드로 배치 */

/* 이어보기 숨김 때 신작 추가 줄만 숨김. TOP 10 크기는 로그인과 무관하다. */
body[data-page="home"] #newEpisodesTrack > .episode-card.home-continue-fill-card {
  display: none !important;
}

/* 1열(사이드바 숨김)에서는 높이 맞춤·분산 여백·보충 카드를 쓰지 않는다 */
@media (max-width: 1024px) {
  body[data-page="home"] .portal-left-column > #todayNewEpisodes {
    margin-top: 0;
  }
  body[data-page="home"] .portal-left-column {
    padding-bottom: 0;
  }
}

@media (min-width: 1025px) {
  /*
   * 포탈 2열
   * 이전 높이 보정(신작 margin-top:auto, 사이드바 space-between, 연재 카드 확대)은 끈다.
   * 섹션은 위쪽 정렬. 사이드바 내부 gap 은 기존 36px.
   * 사이드바 외곽 padding 과 마지막 콘텐츠 하단은 별개다.
   * 이어보기 없음일 때만 오늘의 신작 추가 한 줄(서로 다른 회차)을 연다.
   * TOP 10 카드 높이는 이어보기 유무로 바꾸지 않는다.
   */
  body[data-page="home"] .portal-layout-container {
    align-items: start;
  }

  body[data-page="home"] .portal-left-column > .hero-section,
  body[data-page="home"] .portal-left-column > .continue-section,
  body[data-page="home"] .portal-left-column > .section-space {
    flex: 0 0 auto;
  }

  body[data-page="home"] .portal-left-column > #todayNewEpisodes {
    margin-top: 0;
  }

  body[data-page="home"] .portal-right-sidebar {
    justify-content: flex-start;
    min-height: 0;
  }

  body[data-page="home"] .portal-right-sidebar > .sidebar-section {
    flex: 0 0 auto;
  }

  body[data-page="home"] .portal-layout-container.home-continue-absent
    #newEpisodesTrack > .episode-card.home-continue-fill-card {
    display: block !important;
  }

  /*
   * 이어보기가 실제로 없을 때만 사이드바 스포트라이트를 뺀다.
   * 판단은 기존 home-continue-absent 를 재사용한다. 비로그인과 기록 없는 로그인을 같이 본다.
   * display:none 이라 제목·카드·구분선과 섹션 사이 gap 이 함께 빠진다.
   * 마크업과 샘플은 남긴다. 1열·다른 페이지에는 이 규칙을 적용하지 않는다.
   * 숨긴 뒤 남는 하단 차이는 넓은 PC와 좁은 PC에서 방향이 반대라
   * 섹션 간격을 한쪽 폭에 맞춰 바꾸지 않는다.
   */
  body[data-page="home"] .portal-layout-container.home-continue-absent
    .portal-right-sidebar > #creatorSpotlight {
    display: none;
  }

  /* seriesCompleted와 동일한 전체 폭 프레임 — width hack 없이 정상 포인터 이벤트 유지 */
  body[data-page="home"] #aiFilmsShorts {
    max-width: 1760px;
    margin: 0 auto 50px auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
  }

  /* 전체 폭 안에서 카드 10장을 5열 × 2줄로 배치 */
  body[data-page="home"] #aiFilmsShorts #filmShortsGrid.film-shorts-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* 모바일용 nth-child(n+5) 숨김이 PC에 남아 있어도 10장 모두 표시 */
  body[data-page="home"] #aiFilmsShorts #filmShortsGrid > .series-card {
    display: flex !important;
  }

  /* 중간 PC 폭 — 5열→4열→3열로 자연스럽게 축소 (평점·메타 밀림 방지) */
  @media (max-width: 1480px) {
    body[data-page="home"] #aiFilmsShorts #filmShortsGrid.film-shorts-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 1280px) {
    body[data-page="home"] #aiFilmsShorts #filmShortsGrid.film-shorts-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  /* ── PC: 내 이어보기 카드 텍스트 한 단계 확대 ── */
  body[data-page="home"] .continue-series-title {
    font-size: 0.78rem;
  }

  body[data-page="home"] .continue-ep-title {
    font-size: 0.84rem;
  }

  body[data-page="home"] .continue-ep-num {
    font-size: 0.72rem;
  }

  /*
   * AI Films & Shorts — PC 가로형 카드 제목 옆 분야 배지
   * (common.css 2px 6px → 위·아래 여백 미세 확대)
   */
  body[data-page="home"] #aiFilmsShorts .film-shorts-grid .series-card .badge-series-inline .badge {
    padding: 2px 7px !important;
    line-height: 1.25 !important;
  }
}

/*
 * AI Films & Shorts — 모바일·태블릿 세로 카드 포스터 우상단 배지
 * (단편영화·애니·뮤비 등 — 상·하 패딩 2px)
 */
body[data-page="home"] #aiFilmsShorts .film-shorts-grid .series-card .series-badge-absolute .badge {
  padding: 2px 9px;
  line-height: 1.25;
}

/*
 * 정주행 최적! 완결 AI 명작 — binge 큰 카드 배지·평점, 슬림 카드 완결 배지 미세 확대
 */
body[data-page="home"] #seriesCompleted .binge-banner .md-meta-badges .badge-completed {
  font-size: 0.67rem;
  padding: 4px 10px;
}

body[data-page="home"] #seriesCompleted .binge-banner .md-meta-badges > span:not(.badge) {
  font-size: 0.9rem !important;
}

body[data-page="home"] #seriesCompleted .completed-grid .series-badge-absolute .badge-completed {
  font-size: 0.67rem;
  padding: 4px 9px;
}

/*
 * 정주행 최적! 완결 AI 명작 — 카드 메타에서 크리에이터명(by …) 숨김 (PC·모바일 공통)
 */
body[data-page="home"] #seriesCompleted .series-card-footer > span:last-child,
body[data-page="home"] #seriesCompleted .series-card-footer .creator-name-update {
  display: none !important;
}

body[data-page="home"] #seriesCompleted .series-card-footer {
  justify-content: flex-start !important;
}

/*
 * 크리에이터 하이라이트 — 타이틀 위 여백을 큐레이터 초이스와 동일(50px)로
 * · 큐레이터 상단 = 이전 섹션 margin-bottom 50px
 * · 크리에이터 상단 = padding-top 50px (common.css 24px 축소 규칙 덮어씀)
 */
body[data-page="home"] section#curatorPick {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body[data-page="home"] section#creatorSpotlight.section-space {
  padding-top: 50px !important;
}

/* 하단 크리에이터 하이라이트 — 카드 클릭 시 프로필 모달 (팔로우 버튼 제외) */
body[data-page="home"] section#creatorSpotlight.section-space .creator-card {
  cursor: pointer;
}

/*
 * 메인 — 이번 주·월간 인기작 랭킹 위젯
 * 시네마틱 가로 썸네일(64×44) + 러닝타임 작은 박스 (AI Studio 시안)
 */
#weeklyPopular .sidebar-ranking-item,
#weeklyPopularMobile .sidebar-ranking-item,
#monthlyPopular .sidebar-ranking-item,
#monthlyPopularMobile .sidebar-ranking-item {
  position: relative; /* 러닝타임 absolute 배치 */
}

#weeklyPopular .sidebar-rank-thumb,
#weeklyPopularMobile .sidebar-rank-thumb,
#monthlyPopular .sidebar-rank-thumb,
#monthlyPopularMobile .sidebar-rank-thumb {
  width: 64px;
  height: 44px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 썸네일 임시 텍스트 숨김 — 시네마틱 가로 썸네일(64×44) 크기만 지정 */
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

#weeklyPopular .sidebar-rank-runtime,
#weeklyPopularMobile .sidebar-rank-runtime,
#monthlyPopular .sidebar-rank-runtime,
#monthlyPopularMobile .sidebar-rank-runtime {
  position: absolute;
  bottom: 9px;
  right: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(10, 11, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1px 4px;
  border-radius: 4px;
  letter-spacing: 0.015em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

#weeklyPopular .sidebar-ranking-item:hover .sidebar-rank-runtime,
#weeklyPopularMobile .sidebar-ranking-item:hover .sidebar-rank-runtime,
#monthlyPopular .sidebar-ranking-item:hover .sidebar-rank-runtime,
#monthlyPopularMobile .sidebar-ranking-item:hover .sidebar-rank-runtime {
  background: rgba(0, 0, 0, 0.95);
  color: var(--accent-gold);
  border-color: rgba(212, 163, 89, 0.3);
}

/*
 * 태블릿(769–1024): 히어로가 85vh로 화면을 먹지 않게 한다.
 * 2행 헤더 아래 상단 패딩을 줄이고, 카피·버튼은 배너 세로 중앙에 둔다.
 * 문구는 자르지 않는다. 좌우 패딩을 다시 연다.
 */
@media (max-width: 1024px) and (min-width: 769px) {
  body[data-page="home"] .hero-section {
    min-height: 360px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 0;
  }

  body[data-page="home"] .portal-left-column .hero-section .hero-container {
    padding: 0 32px !important;
  }

  body[data-page="home"] .hero-title {
    font-size: 2.05rem;
    line-height: 1.2;
    margin-bottom: 14px;
  }

  body[data-page="home"] .hero-desc {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  body[data-page="home"] .hero-tagline {
    margin-bottom: 16px;
  }

  body[data-page="home"] .hero-actions {
    margin-bottom: 12px;
  }

  body[data-page="home"] .hero-slide.active {
    opacity: 0.5;
  }
}

/* 낮은 높이(Nest Hub 1024×600 등) — 여백·제목만 줄인다. 문구는 자르지 않는다. */
@media (max-width: 1024px) and (min-width: 769px) and (max-height: 700px) {
  body[data-page="home"] .hero-section {
    min-height: 280px;
    padding: 24px 0;
  }

  body[data-page="home"] .hero-title {
    font-size: 1.7rem;
    margin-bottom: 10px;
  }

  body[data-page="home"] .hero-desc {
    font-size: 0.88rem;
    margin-bottom: 14px;
  }

  body[data-page="home"] .hero-tagline {
    margin-bottom: 10px;
  }
}

/* ── 메인 페이지 모바일 전용 (≤768px) ── */
@media (max-width: 768px) {
  /*
   * 히어로 ↔ 내 이어보기 간격
   * min-height:480px dead space 제거(min-height:auto) 후,
   * 인디케이터 ↔ 타이틀 사이에 본문 한 줄(≈16px) 정도 숨 쉴 간격 유지.
   */
  body[data-page="home"] .hero-section {
    min-height: auto !important;
    padding: 36px 0 16px 0 !important;
    margin-bottom: 0 !important;
  }

  body[data-page="home"] .hero-tagline {
    margin-bottom: 14px !important;
  }

  body[data-page="home"] .hero-actions {
    margin-bottom: 12px !important;
  }

  body[data-page="home"] .hero-indicator-group {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
  }

  /* 인디케이터 ↔ 내 이어보기 — 한 줄(≈16px) 정도의 숨 쉴 간격 */
  body[data-page="home"] .portal-left-column > .hero-section + .continue-section {
    margin-top: -4px;
  }

  body[data-page="home"] .continue-section {
    padding-top: 10px !important;
  }

  /* 이어보기 숨김 시 제목·카드·여백이 레이아웃에 남지 않도록 */
  body[data-page="home"] .continue-section[hidden] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }

  /*
   * 내 이어보기 가로 스와이프 — 오늘의 신작 에피소드(.episodes-scroll)와 동일한 자연 스크롤
   * (common.css scroll-snap mandatory 제거 — 스냅·JS 보정 없이 부드러운 관성 스크롤)
   */
  body[data-page="home"] .continue-grid {
    scroll-snap-type: none !important;
    scroll-behavior: smooth;
  }

  body[data-page="home"] .continue-grid .continue-card {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal;
  }

  /*
   * 랭킹&어워즈 → AI Films & Shorts 사이 여백 축소
   */
  body[data-page="home"] #mobilePopularAndAwards {
    margin-bottom: 16px !important;
  }

  /*
   * 연재 더보기 버튼 ↔ 랭킹&어워즈 타이틀 — 간격 미세 확대
   * (portal-left-column gap 16px + 헤더 margin-top 8px 만으로는 좁게 느껴짐)
   */
  body[data-page="home"] #todayNewEpisodes + #mobilePopularAndAwards {
    margin-top: 8px !important;
  }

  body[data-page="home"] #mobilePopularAndAwards .mobile-tabs-section-header {
    margin-top: 12px !important;
  }

  /* AI Films & Shorts — 타이틀 위 여백 1/3 축소 (20px → 13px) */
  body[data-page="home"] #aiFilmsShorts.section-space {
    padding-top: 13px !important;
    padding-bottom: 16px !important;
    /* HTML inline margin-bottom:50px — 타이틀 위 여백에 직접 기여하므로 함께 절반 축소 */
    margin-bottom: 25px !important;
  }

  /*
   * 정주행 최적! 완결 AI 명작 — 타이틀 위 여백 1/2 축소
   * 실제 간격 = aiFilmsShorts margin-bottom(50) + padding-bottom(32) + 본 섹션 padding-top
   * padding-top만 줄여서는 inline margin-bottom(50px) 때문에 체감 변화 없었음
   */
  body[data-page="home"] #seriesCompleted.section-space {
    padding-top: 10px !important;
    margin-top: 0 !important;
  }

  /*
   * 연재·단편 카드 메타 — 모바일에서 크리에이터명(by …) 숨김
   * (완결 섹션은 상단 PC·모바일 공통 규칙 적용)
   */
  body[data-page="home"] #seriesOngoing .series-card-footer > span:last-child,
  body[data-page="home"] #aiFilmsShorts .series-card-footer > span:last-child,
  body[data-page="home"] #seriesOngoing .series-card-footer .creator-name-update,
  body[data-page="home"] #aiFilmsShorts .series-card-footer .creator-name-update {
    display: none !important;
  }

  body[data-page="home"] #seriesOngoing .series-card-footer,
  body[data-page="home"] #aiFilmsShorts .series-card-footer {
    justify-content: flex-start !important;
  }

  /* 내 이어보기 — 작품·에피·시청률/남은시간·배지 폰트 한 단계 확대 (가독성) */
  body[data-page="home"] .continue-series-title {
    font-size: 0.84rem;
  }

  body[data-page="home"] .continue-ep-title {
    font-size: 0.92rem;
  }

  body[data-page="home"] .continue-ep-num {
    font-size: 0.78rem;
  }

  body[data-page="home"] .continue-badge {
    font-size: 0.66rem;
    padding: 2px 7px;
    border-radius: 5px;
  }

  body[data-page="home"] .continue-info {
    gap: 4px;
  }

  /* 에피소드 제목 ↔ 시청률·배지 — 작품명·에피명 간격(gap)과 동일하게 */
  body[data-page="home"] .continue-meta {
    margin-top: 0;
  }

  /*
   * 오늘의 신작 에피소드 — 스토리 설명 한 단계 확대 (모바일 가독성)
   */
  body[data-page="home"] #todayNewEpisodes .ep-desc {
    font-size: 0.875rem;
    line-height: 1.45;
    height: auto;
    min-height: 40px;
    max-height: calc(0.875rem * 1.45 * 2);
  }

  /*
   * 카드 하단 장르 메타 — 위계는 유지, 가독성만 소폭 개선
   * · 장르 텍스트: text-muted보다 살짝 밝게 (제목·평점보다 약한 톤 유지)
   * · 상단 구분선: 디바이스별로 거의 안 보이던 경계선 미세 강화
   */
  body[data-page="home"] .series-card-footer {
    border-top-color: rgba(255, 255, 255, 0.075);
  }

  body[data-page="home"] .series-card-footer > span:first-child {
    color: rgba(255, 255, 255, 0.52);
  }

  /*
   * AI Films & Shorts — 모바일 세로 카드: 빈 progress 행 제거 + 장르 구분선 여백
   * (상영시간·인라인 평점 숨김 후 제목과 장르선이 붙어 보이는 현상 완화)
   */
  body[data-page="home"] #aiFilmsShorts #filmShortsGrid .series-card .series-progress-wrap {
    display: none !important;
  }

  body[data-page="home"] #aiFilmsShorts #filmShortsGrid .series-card .series-card-footer {
    margin-top: 6px;
    padding-top: 10px;
  }

  /*
   * 랭킹 & 어워즈 모바일 탭 — 패널 타이틀 ↔ 리스트 간격 (랭킹 페이지 탭과 동일 수준)
   */
  body[data-page="home"] #weeklyPopularMobile,
  body[data-page="home"] #monthlyPopularMobile,
  body[data-page="home"] #seasonAwardsMobile {
    padding: 12px !important;
    gap: 0 !important;
  }

  body[data-page="home"] #mobilePopularAndAwards .mobile-tab-content-pane .sidebar-title {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
  }

  /* 랭킹&어워즈 — 주간·월간 상영시간 미세 확대 */
  body[data-page="home"] #weeklyPopularMobile .sidebar-rank-runtime,
  body[data-page="home"] #monthlyPopularMobile .sidebar-rank-runtime {
    font-size: 0.68rem;
    padding: 2px 5px;
  }

  /*
   * 시즌 어워즈 탭 — 카드·트로피 배지 폰트 한 단계 확대
   */
  body[data-page="home"] #seasonAwardsMobile .award-featured-title {
    font-size: 1.08rem !important;
  }

  body[data-page="home"] #seasonAwardsMobile .award-featured-meta {
    font-size: 0.82rem !important;
  }

  body[data-page="home"] #seasonAwardsMobile .award-badge-ribbon {
    font-size: 0.72rem;
    padding: 4px 11px 4px 9px;
  }

  body[data-page="home"] #seasonAwardsMobile .award-badge-ribbon .award-trophy {
    font-size: 1.52rem;
  }

  body[data-page="home"] #seasonAwardsMobile .award-badge-ribbon--compact {
    font-size: 0.79rem;
  }

  body[data-page="home"] #seasonAwardsMobile .award-badge-ribbon--compact .award-trophy {
    font-size: 1.2rem;
  }

  body[data-page="home"] #seasonAwardsMobile .award-item-icon {
    font-size: 0.86rem;
    width: 28px;
    height: 28px;
  }

  body[data-page="home"] #seasonAwardsMobile .award-category {
    font-size: 0.69rem;
  }

  body[data-page="home"] #seasonAwardsMobile .award-title {
    font-size: 0.84rem;
  }

  body[data-page="home"] #seasonAwardsMobile .award-meta {
    font-size: 0.72rem;
  }

  /*
   * 큐레이터 초이스 추천평 — 카드 내 리뷰·작품명·큐레이터 정보 한 단계 확대
   * (common.css 모바일 .curator-quote 0.85rem 덮어씀)
   */
  body[data-page="home"] #curatorPick .curator-badge {
    font-size: 0.79rem;
    padding: 4px 9px;
  }

  body[data-page="home"] #curatorPick .curator-quote {
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 4 !important;
    max-height: calc(0.94rem * 1.5 * 4);
  }

  body[data-page="home"] #curatorPick .curator-target-title {
    font-size: 0.94rem;
    line-height: 1.35;
  }

  body[data-page="home"] #curatorPick .curator-name {
    font-size: 0.83rem;
    line-height: 1.4;
    margin-top: 2px;
  }

  body[data-page="home"] #curatorPick .curator-footer {
    padding-top: 16px;
    gap: 14px;
  }

  body[data-page="home"] #curatorPick .curator-art-small {
    width: 48px;
    height: 60px;
  }

  /*
   * 큐레이터 초이스·크리에이터 하이라이트 — 스와이프 강도를 오늘의 신작 에피소드와 동일하게
   * · common.css mandatory + center snap 제거 → 자연 관성 스크롤
   * · 카드 폭 280px · gap 20px (.episodes-scroll · .episode-card와 동일)
   */
  body[data-page="home"] #curatorPick .curator-grid,
  body[data-page="home"] #creatorSpotlight .creator-grid {
    scroll-snap-type: none !important;
    gap: 20px !important;
    padding: 10px 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    scroll-behavior: smooth;
  }

  body[data-page="home"] #curatorPick .curator-card,
  body[data-page="home"] #creatorSpotlight .creator-card {
    flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal;
    scroll-margin: 0 !important;
  }

  /*
   * 크리에이터 하이라이트 — 카드 내 요소 10% 확대
   * · 알림 배지 높이는 팔로잉 버튼과 동일하게 맞춤
   */
  body[data-page="home"] #creatorSpotlight .creator-card {
    padding: 26px;
    gap: 18px;
  }

  body[data-page="home"] #creatorSpotlight .creator-avatar {
    width: 88px;
    height: 88px;
  }

  body[data-page="home"] #creatorSpotlight .avatar-inner {
    font-size: 1.65rem;
  }

  body[data-page="home"] #creatorSpotlight .creator-name-txt {
    font-size: 1.21rem;
  }

  /*
   * 크리에이터 명칭 배지 — 긴 문구 줄바꿈 방지
   * (패딩·폰트 미세 축소 + 한 줄 유지)
   */
  body[data-page="home"] #creatorSpotlight .creator-tag {
    font-size: 0.79rem;
    padding: 2px 7px;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 크리에이터 소개 — 최대 3줄까지 표시 */
  body[data-page="home"] #creatorSpotlight .creator-desc {
    font-size: 0.94rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: auto;
    max-height: calc(0.94rem * 1.5 * 3);
  }

  body[data-page="home"] #creatorSpotlight .creator-works {
    font-size: 0.83rem;
    padding-top: 13px;
  }

  body[data-page="home"] #creatorSpotlight .creator-follow-btn {
    font-size: 0.79rem;
    height: 29px;
    padding: 5px 13px;
  }

  body[data-page="home"] #creatorSpotlight .creator-alert-badge {
    font-size: 0.72rem;
    height: 29px;
    padding: 5px 9px;
    border-radius: 14px;
  }

  body[data-page="home"] #creatorSpotlight .creator-action-row {
    gap: 9px;
    margin-top: 11px;
  }
}

/*
 * 메인 — 오늘의 신작 에피소드(#todayNewEpisodes) 제외
 * 썸네일·포스터 위 임시 워터마크 텍스트 숨김 (배경 이미지만 노출)
 */
body[data-page="home"] .poster-art-generic:not(:has(.poster-art-genre)) {
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
  letter-spacing: 0;
}

/* 정주행 최적! 완결 AI 명작 — 상단 대표 배너 썸네일 장르 워터마크 */
body[data-page="home"] #seriesCompleted .binge-banner .poster-art-generic .poster-art-genre {
  font-size: 0.95rem;
}

body[data-page="home"] .series-badge-absolute.has-home-format-stack,
body[data-page="home"] .episode-card .thumb-wrap .series-badge-absolute.has-home-format-stack,
body[data-page="home"] .new-badge-absolute.has-home-format-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

body[data-page="home"] .badge-home-shortform {
  font-size: 0.58rem !important;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 6px !important;
  line-height: 1.2 !important;
  background: rgba(255, 90, 120, 0.18) !important;
  color: #ff8fa8 !important;
  border: 1px solid rgba(255, 90, 120, 0.35) !important;
  border-radius: 4px;
}

/* 큐레이터 픽 하단 미니 썸네일 임시 텍스트 숨김 */
body[data-page="home"] .curator-art-small {
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
}

/*
 * 메인 TOP 10 — 신작 카드와 비슷한 가로 썸네일.
 * 로그인·이어보기 클래스로 크기를 바꾸지 않는다.
 * PC 4장 / 모바일 약 1.7장. 자동 슬라이드 없음.
 */
body[data-page="home"] .home-top10 {
  position: relative;
}

body[data-page="home"] .home-top10-viewport {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  container-type: inline-size;
  width: 100%;
}

body[data-page="home"] .home-top10-viewport::-webkit-scrollbar {
  display: none;
}

body[data-page="home"] .home-top10-track {
  display: flex;
  gap: 16px;
}

body[data-page="home"] .home-top10-card {
  flex: 0 0 calc((100cqw - 16px) / 1.7);
  width: calc((100cqw - 16px) / 1.7);
  scroll-snap-align: start;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: inherit;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body[data-page="home"] .home-top10-card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 193, 78, 0.22);
}

body[data-page="home"] .home-top10-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #170e06 center / cover no-repeat;
  flex: 0 0 auto;
}

body[data-page="home"] .home-top10-rank {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 8px;
  background: rgba(8, 8, 12, 0.78);
  color: #f2c14e;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 28px;
  text-align: center;
  pointer-events: none;
}

body[data-page="home"] .home-top10-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 72px;
}

body[data-page="home"] .home-top10-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-page="home"] .home-top10-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 1.2em;
  color: var(--text-sub);
  font-size: 0.78rem;
}

body[data-page="home"] .home-top10-nav {
  display: none;
}

body[data-page="home"] .home-top10-nav[hidden] {
  display: none !important;
}

@media (min-width: 1025px) {
  body[data-page="home"] .home-top10-viewport {
    overflow: hidden;
    scroll-snap-type: none;
  }

  body[data-page="home"] .home-top10-track {
    transition: transform 0.35s ease;
    will-change: transform;
  }

  body[data-page="home"] .home-top10-card {
    flex: 0 0 calc((100cqw - 48px) / 4);
    width: calc((100cqw - 48px) / 4);
    scroll-snap-align: none;
  }

  body[data-page="home"] .home-top10-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 38%;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(12, 12, 16, 0.88);
    color: #fff;
    cursor: pointer;
  }

  body[data-page="home"] .home-top10-prev {
    left: -12px;
  }

  body[data-page="home"] .home-top10-next {
    right: -12px;
  }

  body[data-page="home"] .home-top10-nav:disabled {
    opacity: 0.35;
    cursor: default;
  }
}

/* 오늘의 신작 0건·실패 — 카드 크기를 늘리지 않는 짧은 안내 */
body[data-page="home"] #newEpisodesTrack .catalog-widget-empty {
  margin: 8px 0 4px;
  padding: 10px 4px;
  font-size: 0.82rem;
  color: var(--text-muted, #9aa3b5);
}
