/* 시청 웹 보조 스타일 — 색은 관리 웹과 같은 테마 토큰(themes.css)을 쓴다. */

[x-cloak] { display: none !important; }

/* 헤더 — 포스터 위로 스크롤돼도 읽히게 반투명 + 흐림 */
.play-header {
  background: color-mix(in oklab, var(--color-base-200) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── 포스터 카드 ── */
.card-link { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.card-thumb {
  position: relative; overflow: hidden; border-radius: 0.5rem;
  background: var(--color-base-300);
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.card-thumb img.broken { visibility: hidden; } /* 업스트림 그림이 깨지면 빈 칸(회색 바탕)으로 */
.card-link:hover .card-thumb img, .card-link:focus-visible .card-thumb img { transform: scale(1.04); }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible .card-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.card-title { font-size: 0.875rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sub { font-size: 0.75rem; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1em; }

/* ── 홈 레일 — 가로로 넘기는 한 줄 ── */
/* scroll-padding 은 padding 과 같게 — 없으면 스냅이 첫 카드를 화면 끝에 붙여 왼쪽 여백이 사라진다 */
.rail-track {
  display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0 1rem; scroll-padding-inline: 1rem; scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .rail-track { padding: 0 2rem; scroll-padding-inline: 2rem; } }
.rail-track > * { scroll-snap-align: start; flex: none; }
.card-poster { width: 8.5rem; }
.card-wide { width: 15rem; }
@media (min-width: 768px) { .card-poster { width: 10rem; } .card-wide { width: 18rem; } }
.rail-nav {
  position: absolute; top: 0; bottom: 2.6rem; width: 2.5rem; display: none;
  align-items: center; justify-content: center; font-size: 1.75rem;
  background: color-mix(in oklab, var(--color-base-200) 70%, transparent); opacity: 0; transition: opacity 0.2s;
}
@media (hover: hover) and (min-width: 768px) { .rail-nav { display: flex; } .group:hover .rail-nav { opacity: 1; } }

/* ── 섹션 격자 ── */
.grid-poster { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.grid-wide { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
@media (min-width: 768px) { .grid-poster { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } }

/* ── 상세 ── */
.detail-hero { position: relative; overflow: hidden; }
.detail-backdrop {
  position: absolute; inset: -40px; background-size: cover; background-position: center;
  filter: blur(40px) saturate(1.2); opacity: 0.35;
}
.detail-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 40%, var(--color-base-200));
}
.detail-hero > .relative { z-index: 1; }
.episode-row {
  display: flex; gap: 1rem; align-items: flex-start; padding: 0.5rem; border-radius: 0.75rem;
}
.episode-row:hover { background: var(--color-base-100); }
.episode-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; color: white; opacity: 0; background: rgb(0 0 0 / 0.35); transition: opacity 0.2s;
}
.episode-row:hover .episode-play { opacity: 1; }

/* ── 재생 화면 ── */
.watch-page { position: fixed; inset: 0; z-index: 50; background: #000; color: #fff; container-type: size; }
.watch-video { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* 화면 비율(재생 설정) — 원본은 비율대로 맞추고, 화면 채우기는 넘치는 곳을 잘라 꽉 채우고, 늘리기는 화면 전체에 늘린다.
   16:9·4:3·21:9 는 재생 화면 안에 그 비율의 칸을 만들고 영상을 칸에 늘려 맞춘다(VLC 의 화면 비율). 칸은 재생 화면(컨테이너) 기준이라
   재생 화면째 전체 화면이 되어도 같다. 자막은 칸 안에 그려지고 글자는 늘어나지 않는다. */
.watch-video[data-aspect="fill"] { object-fit: cover; }
.watch-video[data-aspect="stretch"] { object-fit: fill; }
.watch-video[data-aspect="16:9"] { --ar: 1.7778; }
.watch-video[data-aspect="4:3"] { --ar: 1.3333; }
.watch-video[data-aspect="21:9"] { --ar: 2.3333; }
.watch-video[data-aspect*=":"] { width: min(100cqw, 100cqh * var(--ar)); height: min(100cqh, 100cqw / var(--ar)); object-fit: fill; }
/* <video> 자체가 전체 화면이면(사파리·파이어폭스의 기본 전체 화면 버튼) 브라우저가 크기를 덮어써 칸을 만들 수 없다 — 비율 칸은 원본처럼 */
.watch-video:fullscreen[data-aspect*=":"] { object-fit: contain; }
.watch-video:-webkit-full-screen[data-aspect*=":"] { object-fit: contain; }
/* 크롬은 controlslist="nofullscreen" 이면 버튼을 흐리게 남기기만 한다(눌러도 아무 일 없음) — 헷갈리지 않게 감춘다. 전체 화면은 위 막대 버튼 */
.watch-video[controlslist~="nofullscreen"]::-webkit-media-controls-fullscreen-button { display: none; }
.watch-top {
  position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem 2.5rem; transition: opacity 0.3s;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.75), transparent);
}
.watch-top .btn-ghost { color: #fff; }
.watch-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; pointer-events: none; }
.watch-center > * { pointer-events: auto; }
.watch-panel {
  position: absolute; top: 4.5rem; right: 1rem; width: min(20rem, calc(100vw - 2rem));
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: 0.75rem;
  background: color-mix(in oklab, var(--color-base-100) 92%, transparent); color: var(--color-base-content);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.5);
}

/* ── 이어보기 ── */
.progress-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgb(255 255 255 / 0.25); }
.progress-bar > div { height: 100%; background: var(--color-primary); }
.progress-bar.static { position: relative; border-radius: 2px; overflow: hidden; }
.cont-remove {
  position: absolute; top: 0.35rem; right: 0.35rem; opacity: 0; transition: opacity 0.2s;
  background: rgb(0 0 0 / 0.6); border: none; color: #fff;
}
.card-wide:hover .cont-remove, .cont-remove:focus-visible { opacity: 1; }
@media (hover: none) { .cont-remove { opacity: 1; } }
.watch-toast {
  position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%); display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 999px; background: rgb(0 0 0 / 0.75); color: #fff; font-size: 0.875rem;
}
.watch-toast .btn { color: #fff; }

/* ── 다음 회차 ── */
.watch-next {
  position: absolute; right: 1.5rem; bottom: 5.5rem; width: min(22rem, calc(100vw - 3rem));
  padding: 1rem; border-radius: 0.75rem; background: rgb(0 0 0 / 0.8); color: #fff;
}
.watch-next .btn-ghost { color: #fff; }

/* ── 라이브 ── */
.grid-live { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.live-card {
  display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem; border-radius: 0.75rem;
  background: var(--color-base-100); transition: background 0.15s;
}
.live-card:hover { background: var(--color-base-300); }
.live-logo {
  width: 5rem; height: 3.25rem; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 0.5rem; background: var(--color-base-300); overflow: hidden;
}
.live-logo img { max-width: 85%; max-height: 80%; object-fit: contain; }
.live-logo img.broken, .chan-logo.broken { display: none; }
.chan-panel { max-height: calc(100vh - 6rem); }
.chan-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: 0.5rem; }
.chan-row:hover { background: var(--color-base-300); }
.chan-row.active { background: color-mix(in oklab, var(--color-primary) 25%, transparent); }
.chan-logo { width: 2.5rem; height: 1.6rem; object-fit: contain; flex: none; }

/* ── 사이드바 — 넓은 화면은 헤더 밑에 붙어 있고(자기 안에서 스크롤), 좁은 화면은 왼쪽에서 밀려 나온다 ── */
.play-side {
  width: 14rem; flex: none; position: sticky; top: 4rem; height: calc(100vh - 4rem); overflow-y: auto;
  border-right: 1px solid var(--color-base-300); scrollbar-width: thin;
}
.play-side .menu li > a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.play-side .menu li > a iconify-icon { vertical-align: -0.15em; margin-right: 0.35rem; }
.play-side .side-group { margin-top: 0.75rem; font-weight: 700; opacity: 0.85; }
.side-backdrop { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 0.5); }
@media (max-width: 1023px) {
  .play-side {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 50; width: 16rem;
    background: var(--color-base-200); transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .play-side.open { transform: none; }
}

/* ── 회차 고르기(재생 화면) ── */
.ep-panel { width: min(24rem, calc(100vw - 2rem)); }
.ep-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: 0.5rem; }
.ep-row:hover { background: var(--color-base-300); }
.ep-row.active { background: color-mix(in oklab, var(--color-primary) 25%, transparent); }
.ep-thumb { position: relative; width: 6.5rem; aspect-ratio: 16 / 9; flex: none; overflow: hidden; border-radius: 0.35rem; background: var(--color-base-300); }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ep-thumb img.broken { display: none; }
.ep-thumb .progress-bar > span { display: block; height: 100%; background: var(--color-primary); }

/* ── 목록에서 바로 재생(카드의 ▶) — 마우스는 올렸을 때, 터치 화면은 늘 모서리에 작게 ── */
.card-play {
  position: absolute; left: 50%; top: 50%; width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem;
  display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 1.4rem; color: #fff;
  background: rgb(0 0 0 / 0.6); border: 2px solid rgb(255 255 255 / 0.85); opacity: 0; transition: opacity 0.15s, transform 0.15s;
  cursor: pointer;
}
.card-play:hover { transform: scale(1.08); background: var(--color-primary); border-color: var(--color-primary); }
.card-link:hover .card-play, .card-link:focus-within .card-play, .card-play.busy { opacity: 1; }
@media (hover: none) {
  .card-play {
    left: auto; top: auto; right: 0.4rem; bottom: 0.4rem; margin: 0; width: 2.25rem; height: 2.25rem; font-size: 1rem; opacity: 1;
  }
}