/* v17: 상세페이지 전용 인라인 CSS. 메인 메뉴/헤더는 건드리지 않음 */
.detail-hero{
  position:relative!important;
  width:100%!important;
  min-height:520px!important;
  overflow:hidden!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center 32%!important;
  background-color:#08100f!important;
}
.detail-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:
    linear-gradient(90deg,rgba(5,11,10,.97) 0%,rgba(5,11,10,.88) 34%,rgba(5,11,10,.55) 68%,rgba(5,11,10,.82) 100%),
    linear-gradient(0deg,rgba(5,11,10,.98) 0%,rgba(5,11,10,.08) 48%)!important;
}
.detail-hero-body{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:260px minmax(0,1fr)!important;
  gap:42px!important;
  align-items:center!important;
  width:min(1280px,calc(100% - 48px))!important;
  min-height:520px!important;
  margin:0 auto!important;
  padding:52px 0!important;
}
.detail-poster-wrap{
  width:260px!important;
  max-width:260px!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:16px!important;
  box-shadow:0 22px 60px rgba(0,0,0,.48)!important;
}
.detail-poster-wrap img{
  display:block!important;
  width:100%!important;
  aspect-ratio:2/3!important;
  object-fit:cover!important;
}
.detail-info{min-width:0!important}
.detail-title{
  margin:0 0 16px!important;
  color:#fff!important;
  font-size:clamp(36px,4.2vw,54px)!important;
  line-height:1.06!important;
  letter-spacing:-.05em!important;
  font-weight:950!important;
}
.detail-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-bottom:14px!important;
}
.detail-chips .chip{
  display:inline-flex!important;
  align-items:center!important;
  min-height:30px!important;
  padding:0 10px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  color:#dce6e3!important;
  font-size:11px!important;
}
.detail-score-row{
  display:flex!important;
  align-items:baseline!important;
  gap:8px!important;
  margin:0 0 16px!important;
}
.detail-score-num{color:#ffd55f!important;font-size:22px!important;font-weight:900!important}
.detail-score-lbl{color:#a7b7b3!important;font-size:12px!important}
.detail-overview{
  max-width:850px!important;
  margin:0 0 20px!important;
  color:#c1ceca!important;
  font-size:14px!important;
  line-height:1.85!important;
}

/* 본문 폭 확장 */
.wrap{
  width:min(1280px,calc(100% - 48px))!important;
  max-width:1280px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.detail-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 320px!important;
  gap:34px!important;
  align-items:start!important;
}
.detail-main-col,.detail-side-col{min-width:0!important}
.detail-side-col{
  display:grid!important;
  gap:14px!important;
  position:sticky!important;
  top:88px!important;
}

/* 본문 섹션 */
.detail-layout .section-block{
  margin:0 0 30px!important;
  padding:0!important;
}
.detail-layout .section-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin:0 0 14px!important;
}
.detail-sec-title,
.detail-layout .section-head h2{
  margin:0!important;
  color:#f2f6f5!important;
  font-size:21px!important;
  line-height:1.3!important;
  letter-spacing:-.03em!important;
}
.enrichment-section{
  padding:26px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:14px!important;
  background:#111918!important;
  box-shadow:0 10px 28px rgba(0,0,0,.12)!important;
}
.detail-seo-copy p{
  margin:0 0 12px!important;
  color:#b8c6c2!important;
  font-size:13px!important;
  line-height:1.9!important;
}
.detail-seo-copy p:last-child{margin-bottom:0!important}
.enrichment-tags{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:18px!important;
}
.enrichment-tags span{
  padding:7px 10px!important;
  border-radius:999px!important;
  background:#1a2422!important;
  color:#a5b7b2!important;
  font-size:10px!important;
}

/* 우측 정보 */
.side-box{
  padding:19px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:12px!important;
  background:#111918!important;
}
.side-box-title{
  margin:0 0 12px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
}
.cast-list{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  gap:9px!important;
}
.cast-list li{
  color:#b7c5c1!important;
  font-size:12px!important;
  line-height:1.55!important;
}
.info-table{
  width:100%!important;
  border-collapse:collapse!important;
  font-size:12px!important;
}
.info-table td{
  padding:8px 0!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
.info-table td:first-child{width:72px!important;color:#82948f!important}
.info-table td:last-child{color:#c7d2cf!important}

/* 예고편 */
.trailer-wrap{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
.trailer-item,.youtube-lightbox-trigger{width:100%!important}
.youtube-lightbox-trigger{
  position:relative!important;
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:12px!important;
  background:#111918!important;
  box-shadow:0 8px 24px rgba(0,0,0,.14)!important;
}
.youtube-lightbox-trigger img{
  display:block!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
}
.youtube-play-mark{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  display:grid!important;
  place-items:center!important;
  width:52px!important;
  height:52px!important;
  border-radius:50%!important;
  background:rgba(0,0,0,.72)!important;
  color:#fff!important;
  font-size:20px!important;
}
.youtube-caption{
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  padding:36px 14px 12px!important;
  background:linear-gradient(transparent,rgba(0,0,0,.84))!important;
  color:#fff!important;
  font-size:11px!important;
  text-align:left!important;
}

/* 이미지 */
.image-strip{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
.image-thumb{
  overflow:hidden!important;
  border-radius:10px!important;
  background:#111918!important;
}
.image-thumb img{
  display:block!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
}

/* 추천 */
.card-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:16px!important;
}
.title-card{
  min-width:0!important;
  color:inherit!important;
  text-decoration:none!important;
}
.poster-wrap{
  position:relative!important;
  overflow:hidden!important;
  border-radius:11px!important;
  aspect-ratio:2/3!important;
  background:#141d1b!important;
}
.poster-wrap>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.poster-overlay{display:none!important}
.score-badge{
  position:absolute!important;
  right:7px!important;
  top:7px!important;
  padding:4px 6px!important;
  border-radius:6px!important;
  background:rgba(0,0,0,.78)!important;
  color:#ffd45f!important;
  font-size:10px!important;
}
.card-meta{padding:8px 2px 0!important}
.card-title{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#eef4f2!important;
  font-size:13px!important;
}
.card-year{margin-top:4px!important;color:#82938f!important;font-size:10px!important}

/* FAQ */
.faq-list details{
  padding:16px 18px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:10px!important;
  background:#111918!important;
}
.faq-list summary{
  cursor:pointer!important;
  color:#eef4f2!important;
  font-size:12px!important;
  font-weight:850!important;
}
.faq-list p{
  margin:9px 0 0!important;
  color:#9fb0ac!important;
  font-size:11px!important;
  line-height:1.7!important;
}

/* 배경 타일링 완전 차단 */
.detail-hero[style*="background-image"]{
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center 32%!important;
}

/* 태블릿 */
@media(max-width:980px){
  .detail-hero-body,.wrap{width:calc(100% - 32px)!important}
  .detail-hero-body{
    grid-template-columns:180px minmax(0,1fr)!important;
    gap:24px!important;
  }
  .detail-poster-wrap{width:180px!important;max-width:180px!important}
  .detail-layout{grid-template-columns:1fr!important}
  .detail-side-col{
    position:static!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .image-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .card-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* 모바일 */
@media(max-width:640px){
  .detail-hero{min-height:auto!important}
  .detail-hero-body{
    width:calc(100% - 24px)!important;
    min-height:auto!important;
    grid-template-columns:110px minmax(0,1fr)!important;
    gap:15px!important;
    align-items:start!important;
    padding:28px 0!important;
  }
  .detail-poster-wrap{width:110px!important;max-width:110px!important}
  .detail-title{font-size:24px!important}
  .detail-overview{
    font-size:11px!important;
    line-height:1.65!important;
    display:-webkit-box!important;
    -webkit-line-clamp:5!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .wrap{width:calc(100% - 24px)!important}
  .detail-side-col{grid-template-columns:1fr!important}
  .enrichment-section{padding:18px!important}
  .trailer-wrap{grid-template-columns:1fr!important}
  .image-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
}
@media(max-width:390px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Season/episode pages: keep media and text within the shared detail grid. */
.season-detail-page .detail-main-col,.episode-detail-page .detail-main-col,
.season-detail-page .detail-side-col,.episode-detail-page .detail-side-col{min-width:0}
.season-detail-page .detail-episode-card,.season-detail-page .episode-card-copy{min-width:0;overflow-wrap:anywhere}
.season-detail-page .detail-episode-card>a{min-width:0;grid-template-columns:minmax(0,280px) minmax(0,1fr)}
.season-detail-page .episode-card-media img{display:block;max-width:100%;height:auto;align-self:start}
.season-detail-hero .detail-title,.episode-detail-hero .detail-title{overflow-wrap:anywhere}
@media(max-width:820px){.season-detail-page .detail-episode-card>a{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.season-detail-page,.episode-detail-page{padding-left:0!important;padding-right:0!important}}

/* Accessible season/episode links: visited links retain the same readable palette. */
:is(.season-detail-page,.episode-detail-page) a,
:is(.season-detail-page,.episode-detail-page) a:link,
:is(.season-detail-page,.episode-detail-page) a:visited,
:is(.season-detail-page,.episode-detail-page) a:hover,
:is(.season-detail-page,.episode-detail-page) a:active,
:is(.season-detail-page,.episode-detail-page) a:focus-visible,
a.season-card,a.season-card:link,a.season-card:visited,a.season-card:hover,a.season-card:active{
 color:#7dd3fc!important;text-decoration:none;
}
:is(.season-detail-page,.episode-detail-page) a strong,
:is(.season-detail-page,.episode-detail-page) a em,
.season-card strong{color:#7dd3fc!important}
:is(.season-detail-page,.episode-detail-page) a small,
.season-card small{color:#c1d6e8!important}
:is(.season-detail-page,.episode-detail-page) a:hover,
.season-card:hover{border-color:#7dd3fc!important}
:is(.season-detail-page,.episode-detail-page) a:focus-visible,
.season-card:focus-visible{outline:2px solid #7dd3fc;outline-offset:3px}
:is(.season-detail-page,.episode-detail-page) .episode-number-grid a.is-current,
:is(.season-detail-page,.episode-detail-page) .episode-number-grid a.is-current:visited,
:is(.season-detail-page,.episode-detail-page) .episode-number-grid a.is-current:hover{
 background:#164b70!important;border-color:#7dd3fc!important;color:#e2f4ff!important;
}

/* Match the homepage guide: sky blue, underlined, unchanged after visiting. */
:is(.season-detail-page,.episode-detail-page) .enrichment-breadcrumb a,
:is(.season-detail-page,.episode-detail-page) .info-table a,
:is(.season-detail-page,.episode-detail-page) .episode-card-copy strong,
:is(.season-detail-page,.episode-detail-page) .episode-card-copy em,
:is(.season-detail-page,.episode-detail-page) .episode-pager strong,
:is(.season-detail-page,.episode-detail-page) .season-side-nav a span,
.season-card strong{font-weight:700;text-decoration:underline!important;text-underline-offset:3px}
:is(.season-detail-page,.episode-detail-page) a:hover,
:is(.season-detail-page,.episode-detail-page) a:focus,
:is(.season-detail-page,.episode-detail-page) a:hover strong,
:is(.season-detail-page,.episode-detail-page) a:focus strong,
:is(.season-detail-page,.episode-detail-page) a:hover em,
:is(.season-detail-page,.episode-detail-page) a:focus em,
a.season-card:hover,a.season-card:focus,
a.season-card:hover strong,a.season-card:focus strong{color:#e0f2fe!important}
