/* ============================================
   YaFlix.top — v2 "After Dark"
   plum-black 바탕 + 로즈 단일 포인트
   ============================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }

:root {
  --ink: #0F0C12;          /* 페이지 바탕 */
  --raise: #19141D;        /* 떠 있는 면 (헤더, 입력창) */
  --raise-2: #221B27;      /* hover 면 */
  --line: #2B2431;         /* 구분선 */
  --text: #F4EEF3;
  --mute: #9C90A3;
  --faint: #6A5F70;
  --rose: #FF4F8B;         /* 유일한 포인트 컬러 */
  --rose-soft: rgba(255, 79, 139, .14);
  --scrim: linear-gradient(180deg, rgba(15,12,18,0) 0%, rgba(15,12,18,.55) 55%, var(--ink) 100%);

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-display: 'Unbounded', var(--font);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1480px;
  --r-sm: 6px;
  --r-md: 10px;
  --header-h: 64px;
  --tabbar-h: 0px;
  color-scheme: dark;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { transition: none !important; animation: none !important }
}

body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  min-height: 100vh;
  padding-bottom: var(--tabbar-h);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
[hidden] { display: none !important }   /* hidden 속성이 display:grid 등에 덮이지 않게 */

:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: var(--r-sm) }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter) }


/* ─────────────── Header ─────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(15, 12, 18, .72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.header.scrolled { border-bottom-color: var(--line) }

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.04em;
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
}
.logo b { color: var(--rose); font-weight: 700 }
.logo small { font-size: 12px; font-weight: 400; color: var(--faint); margin-left: 2px; letter-spacing: 0 }

.nav { display: flex; gap: 22px }
.nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--mute);
  padding: 6px 0;
  position: relative;
  transition: color .15s;
}
.nav a:hover { color: var(--text) }
.nav a.active { color: var(--text); font-weight: 700 }
.nav a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--rose);
}

.search {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
}
.search svg {
  position: absolute;
  left: 14px;
  width: 17px; height: 17px;
  color: var(--faint);
  pointer-events: none;
}
.search input {
  width: 260px;
  height: 40px;
  padding: 0 52px 0 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--raise);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, width .25s, background .15s;
}
.search input::placeholder { color: var(--faint) }
.search input:focus { border-color: var(--rose); width: 340px; background: var(--ink) }
.search kbd {
  position: absolute;
  right: 12px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  pointer-events: none;
}
.search input:focus + kbd { display: none }


/* ─────────────── Hero (홈 최신작) ─────────────── */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
  transform: scale(1.04);
  animation: heroIn 1.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroIn { from { opacity: 0; transform: scale(1.12) } to { opacity: 1; transform: scale(1.04) } }

.hero::before {
  /* 좌측 + 하단 스크림 */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,12,18,.92) 0%, rgba(15,12,18,.55) 40%, rgba(15,12,18,0) 75%),
    var(--scrim);
}

.hero-body {
  width: 100%;
  padding-block: 140px 56px;
}
.hero-content { max-width: 620px }
.hero-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rose);
  margin-bottom: 14px;
}
.hero-new::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px var(--rose-soft);
}
.hero h1 {
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
  color: var(--mute);
  margin-bottom: 26px;
}
.hero-meta a:hover { color: var(--text) }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  transition: transform .15s, background .15s;
}
.btn svg { width: 18px; height: 18px }
.btn-play { background: var(--text); color: var(--ink) }
.btn-play:hover { background: #fff; transform: scale(1.03) }
.btn-ghost { background: rgba(244,238,243,.12); color: var(--text); backdrop-filter: blur(8px) }
.btn-ghost:hover { background: rgba(244,238,243,.2) }


/* ─────────────── Category chips ─────────────── */
.chips-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(15, 12, 18, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 12px;
}
.chips::-webkit-scrollbar { display: none }
.chip {
  flex-shrink: 0;
  height: 34px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  background: var(--raise);
  color: var(--mute);
  transition: background .15s, color .15s;
}
.chip:hover { background: var(--raise-2); color: var(--text) }
.chip.active { background: var(--text); color: var(--ink); font-weight: 700 }
.chip-n { margin-left: 6px; font-size: 12px; font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums }
.chip.is-zero { opacity: .45 }


/* ─────────────── Section heads ─────────────── */
.section { padding-block: 28px 8px }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.section-head h2, .page-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.section-head .count { font-size: 14px; color: var(--faint); font-variant-numeric: tabular-nums }
.section-head .more {
  margin-left: auto;
  font-size: 14px;
  color: var(--mute);
}
.section-head .more:hover { color: var(--rose) }

.page-head { padding-block: 36px 20px }
.page-title { font-size: clamp(24px, 3vw, 32px) }
.page-sub { color: var(--mute); font-size: 14px; margin-top: 6px }


/* ─────────────── Horizontal rail ─────────────── */
.rail-wrap { position: relative }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 22vw, 300px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-bottom: 8px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none }
.rail > * { scroll-snap-align: start }

.rail-btn {
  position: absolute;
  top: 0;
  height: calc(var(--rail-thumb-h, 56%) );
  aspect-ratio: auto;
  width: 44px;
  display: grid;
  place-items: center;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s;
  color: var(--text);
}
.rail-btn svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)) }
.rail-btn.prev { left: calc(var(--gutter) * -1); background: linear-gradient(90deg, var(--ink), transparent) }
.rail-btn.next { right: calc(var(--gutter) * -1); background: linear-gradient(270deg, var(--ink), transparent) }
.rail-wrap:hover .rail-btn:not([disabled]) { opacity: 1 }
.rail-btn[disabled] { pointer-events: none }
@media (hover: none) { .rail-btn { display: none } }


/* ─────────────── Video card ─────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px 16px;
}

.card { display: block; min-width: 0 }
.card .thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--raise);
}
.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.card .thumb::after {
  /* hover 시 재생 아이콘 */
  content: '';
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.14v13.72a1 1 0 0 0 1.5.86l11-6.86a1 1 0 0 0 0-1.72l-11-6.86A1 1 0 0 0 8 5.14Z'/%3E%3C/svg%3E") center / 40px no-repeat,
    rgba(15,12,18,.35);
  opacity: 0;
  transition: opacity .2s;
}
.card:hover .thumb img { transform: scale(1.05) }
.card:hover .thumb::after { opacity: 1 }
.card:focus-visible { outline: none }
.card:focus-visible .thumb { outline: 2px solid var(--rose); outline-offset: 2px }

.thumb-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--line);
}

.badge-time {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(15,12,18,.82);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.card .body { padding-top: 10px }
.card .title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.card:hover .title { color: #fff }
.card .meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--mute);
  display: flex;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.card .meta .meta-tag { color: var(--faint) }


/* ─────────────── Ranked card (TOP 10 / 인기 100) ─────────────── */
.ranked {
  --n: 128px;                                   /* 숫자 크기 */
  --pad: calc(var(--n) * .6 * var(--d, 1));     /* 자릿수만큼 왼쪽 공간 */
  position: relative;
  container-type: inline-size;
  padding-left: var(--pad);
}
.ranked .num {
  position: absolute;
  left: 0;
  /* 숫자 아랫선 = 썸네일 아랫선 */
  top: calc((100cqw - var(--pad)) * .5625 - var(--n) * .74);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--n);
  line-height: .74;
  letter-spacing: -0.06em;
  color: var(--ink);
  -webkit-text-stroke: 2px var(--faint);
  user-select: none;
  transition: -webkit-text-stroke-color .2s;
}
.ranked .card { position: relative; z-index: 1 }
.ranked:hover .num { -webkit-text-stroke-color: var(--rose) }
.ranked:nth-child(-n+3) .num { -webkit-text-stroke-color: var(--text) }

.rail.top10 { grid-auto-columns: clamp(300px, 28vw, 400px) }

.grid.ranked-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px 24px }
.ranked-grid .ranked { --n: 104px }


/* ─────────────── Pagination ─────────────── */
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-block: 48px 24px;
}
.pagination a, .pagination span {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.pagination a { background: var(--raise) }
.pagination a:hover { background: var(--raise-2); color: var(--text) }
.pagination .current { background: var(--rose); color: #fff }
.pagination .gap { background: none }


/* ─────────────── Tags page ─────────────── */
.tag-group {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px 24px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}
.tag-group:first-of-type { border-top: 0 }
.tag-group h2 { font-size: 16px; font-weight: 700; padding-top: 8px }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0 }
.tag {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--raise);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.tag:hover { background: var(--rose-soft); color: var(--rose) }
.tag .n { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums }
.tag:hover .n { color: var(--rose) }
.tag.is-zero { opacity: .4 }


/* ─────────────── Actors ─────────────── */
.actor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 28px 16px;
}
.actor { text-align: center; min-width: 0 }
.actor .avatar {
  position: relative;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--raise);
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 800;
  color: var(--faint);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px transparent;
  transition: box-shadow .2s;
}
.actor .avatar img { width: 100%; height: 100%; object-fit: cover }
.actor:hover .avatar { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--rose) }
.actor .name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.actor .n { font-size: 13px; color: var(--mute) }


/* ─────────────── Watch page ─────────────── */
.watch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  padding-block: 24px 40px;
}
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
}
.player video { width: 100%; height: 100%; display: block; background: #000 }
.player-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--mute);
  font-size: 14px;
  padding: 24px;
}
.player-empty img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .25; filter: blur(6px);
}
.player-empty p { position: relative }

.watch-title {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.03em;
  margin-top: 18px;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.watch-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--mute);
}
.watch-meta .actor-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
}
.watch-meta .actor-link .dot {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--rose-soft); color: var(--rose);
  display: grid; place-items: center; font-size: 13px;
}
.watch-meta .actor-link:hover { color: var(--rose) }

.watch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px }
.watch-tags a {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--raise);
  font-size: 13px;
  color: var(--mute);
}
.watch-tags a:hover { color: var(--rose); background: var(--rose-soft) }

.side h2 { font-size: 16px; font-weight: 800; margin-bottom: 14px }
.side-list { display: flex; flex-direction: column; gap: 12px }
.side-list .card {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.side-list .card .body { padding-top: 0 }
.side-list .card .title { font-size: 14px }
.side-list .card .thumb { border-radius: var(--r-sm) }
.side-list .card .thumb::after { background-size: 28px }


/* ─────────────── Empty state ─────────────── */
.empty {
  padding: 96px 0;
  text-align: center;
  color: var(--mute);
}
.empty strong { display: block; color: var(--text); font-size: 18px; margin-bottom: 6px }
.empty a { color: var(--rose); font-weight: 600 }


/* ─────────────── Footer ─────────────── */
.footer {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  padding-block: 28px;
  color: var(--faint);
  font-size: 13px;
}
.footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between }
.footer .logo { font-size: 15px; color: var(--mute) }


/* ─────────────── Mobile tab bar ─────────────── */
.tabbar { display: none }

@media (max-width: 1100px) {
  .watch { grid-template-columns: minmax(0, 1fr) }
  .side-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px 16px }
  .side-list .card { display: block }
  .side-list .card .body { padding-top: 10px }
  .side-list .card .title { font-size: 15px }
}

@media (max-width: 760px) {
  :root { --header-h: 56px; --tabbar-h: calc(60px + env(safe-area-inset-bottom, 0px)) }
  body { font-size: 14px }
  .header-inner { gap: 12px }
  .nav { display: none }
  .search input { width: 100%; height: 38px }
  .search input:focus { width: 100% }
  .search { flex: 1; margin-left: 8px }
  .search kbd { display: none }

  .hero { min-height: 62vh }
  .hero-body { padding-block: 120px 28px }
  .hero::before {
    background: linear-gradient(180deg, rgba(15,12,18,.2) 0%, rgba(15,12,18,.6) 50%, var(--ink) 100%);
  }
  .btn { height: 44px; padding: 0 20px; font-size: 14px }

  .rail { grid-auto-columns: 72vw }
  .rail.top10 { grid-auto-columns: 82vw }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px }
  .grid .card .title { font-size: 13px }
  .grid .card .meta { font-size: 12px }
  .grid.ranked-grid { grid-template-columns: minmax(0, 1fr) }
  .ranked, .ranked-grid .ranked { --n: 88px }

  .tag-group { grid-template-columns: 1fr; gap: 12px }
  .tag-group h2 { padding-top: 0 }
  .actor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px }
  .actor .avatar { font-size: 24px }
  .actor .name { font-size: 13px }

  .watch { padding-top: 0; margin-inline: calc(var(--gutter) * -1) }
  .player { border-radius: 0 }
  .watch-main > :not(.player), .side { padding-inline: var(--gutter) }
  .side-list { grid-template-columns: minmax(0, 1fr) }
  .side-list .card { display: grid; grid-template-columns: 148px minmax(0, 1fr) }
  .side-list .card .body { padding-top: 0 }
  .side-list .card .title { font-size: 13px }

  .footer { margin-top: 32px }

  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(15, 12, 18, .9);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-top: 1px solid var(--line);
  }
  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--faint);
  }
  .tabbar svg { width: 22px; height: 22px }
  .tabbar a.active { color: var(--text) }
  .tabbar a.active svg { color: var(--rose) }
}