/* Dark Love drama details: a full-height story cover and a compact episode library. */
.page-drama{--header-height:52px}
.drama-detail{display:grid;grid-template-columns:50vw minmax(0,1fr);align-items:start;column-gap:64px;width:100vw;max-width:100vw;padding-inline-end:110px;background:#000}
.drama-detail-hero{position:sticky;top:var(--header-height);isolation:isolate;width:100%;height:calc(100svh - var(--header-height));min-height:0;overflow:hidden;background:#000000}
.drama-detail-art{position:absolute;z-index:-2;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 35%}
.drama-detail-hero::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(180deg,#00000005 15%,#00000018 30%,#000000a6 54%,#000000e6 76%,#000000f5 100%)}
.drama-detail-hero-info{position:absolute;inset-inline:0;bottom:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:40px 40px 64px 120px;scrollbar-width:thin;scrollbar-color:#ffffff30 transparent}
.drama-detail-hero h1{font-size:36px;font-weight:500;line-height:48px;letter-spacing:-.03em;text-wrap:pretty;overflow-wrap:anywhere;color:#fff8fb}
.drama-detail-synopsis{position:relative;margin-top:16px;padding-inline-end:24px;color:#e3dce1;font-size:14px;line-height:20px}
.drama-detail-synopsis-copy{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-wrap:pretty}
.drama-detail-synopsis-copy p+p{margin-top:12px}
.drama-detail-synopsis.is-expanded .drama-detail-synopsis-copy{display:block;-webkit-line-clamp:unset}
.drama-detail-synopsis-toggle{position:absolute;inset-inline-end:-3px;bottom:-5px;display:grid;place-items:center;width:28px;height:28px;padding:5px;border:0;border-radius:50%;background:transparent;color:#eee4e9}
.drama-detail-synopsis-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;transform:rotate(90deg);transition:transform .2s}
.drama-detail-synopsis.is-expanded .drama-detail-synopsis-toggle svg{transform:rotate(-90deg)}
.drama-detail-genres{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.drama-detail-genres a{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid #ff569f20;border-radius:6px;background:#ff569f16;color:var(--pink-soft);font-size:14px;line-height:20px;transition:background .2s,color .2s}
.drama-detail-warnings{margin-top:12px;color:#ddc4d1;font-size:12px;line-height:1.6}
.drama-detail-warnings>span{font-weight:600}
.drama-detail-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
.drama-detail-episode-total{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;max-width:calc(100% - 160px);color:#d2c5cc;font-size:12px;line-height:18px}
.drama-detail-episode-total strong{color:#fff8fb;font-size:14px;font-weight:500;line-height:20px;font-variant-numeric:tabular-nums}
.drama-detail-play{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:10px;min-width:146px;min-height:48px;max-width:100%;padding:10px 20px;border:1px solid #ffb1d42b;border-radius:12px;background:linear-gradient(105deg,#ffb1d4 0%,#ff569f 75%,#f64b97 100%);color:#270a18;font-size:16px;font-weight:600;line-height:24px;transition:filter .2s,box-shadow .2s}
.drama-detail-play svg{width:18px;height:18px;fill:currentColor;stroke:none}
.drama-detail-content{min-width:0;padding-block:26px 72px}
.drama-detail-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-width:0;margin-bottom:48px;color:#97858f;font-size:12px;line-height:20px;overflow-wrap:anywhere}
.drama-detail-breadcrumb a{display:inline-flex;align-items:center;min-height:20px;color:#c4b7bf;transition:color .2s}
.drama-detail-breadcrumb [aria-current]{color:#e9dfe5}
.drama-detail-chapters{min-width:0}
.drama-detail-chapter-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;margin-bottom:20px}
.drama-detail-tabs{display:flex;flex:1;align-items:center;gap:32px;min-width:0;min-height:25px;padding-inline:10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:none}
.drama-detail-tabs::-webkit-scrollbar{display:none}
.drama-detail-tabs button{position:relative;flex:none;min-height:25px;padding:0 0 4px;border:0;border-bottom:1px solid transparent;background:transparent;color:#a797a1;font-size:14px;font-weight:400;line-height:20px;white-space:nowrap;transition:color .2s,border-color .2s}
.drama-detail-tabs button[aria-selected=true]{border-bottom-color:var(--pink);color:var(--pink)}
.drama-detail-tabs button:focus-visible{outline-offset:0}
.drama-detail-all-episodes{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;min-height:25px;max-width:45%;color:#b9a8b2;font-size:12px;line-height:18px;text-align:end}
.drama-detail-all-episodes svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
.drama-detail-episode-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;min-width:0}
.drama-detail-episode{position:relative;display:grid;place-items:center;min-width:0;height:50px;padding:5px;border:1px solid transparent;border-radius:6px;background:#11121a;color:#f2e9ee;font-size:14px;font-weight:600;line-height:24px;font-variant-numeric:tabular-nums;transition:background .2s,border-color .2s,color .2s}
.drama-detail-episode.is-locked{padding-top:11px;background:#11121a;color:#797a87}
.drama-detail-episode-lock{position:absolute;top:3px;inset-inline-end:3px;width:16px;height:16px;padding:4px;border-radius:4px}
.drama-detail-episode:focus-visible{outline-offset:1px}
.drama-detail-related{min-width:0;margin-top:60px}
.drama-detail-related h2{font-size:28px;font-weight:400;line-height:1.4;letter-spacing:-.025em;overflow-wrap:anywhere}
.drama-detail-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;min-width:0;margin-top:24px}
.drama-detail-related-card{min-width:0}
.drama-detail-related-card>a{position:relative;display:block;min-width:0}
.drama-detail-related-poster{position:relative;isolation:isolate;aspect-ratio:3/4;overflow:hidden;border-radius:20px;background:#11121a}
.drama-detail-related-poster::after{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 30%,#00000030 48%,#000000e6 100%)}
.drama-detail-related-poster img{width:100%;height:100%;object-fit:cover;transition:filter .2s}
.drama-detail-related-card h3{position:absolute;z-index:2;inset-inline:12px;bottom:12px;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:0;color:#fff8fb;font-size:14px;font-weight:500;line-height:20px;letter-spacing:0;text-wrap:pretty;overflow-wrap:anywhere;transition:color .2s}
[dir=rtl] .drama-detail-hero-info{padding-inline-start:120px;padding-inline-end:40px}
[dir=rtl] .drama-detail-all-episodes svg{transform:rotate(180deg)}
@media(hover:hover) and (pointer:fine){
  .drama-detail-play:hover{filter:brightness(1.06);box-shadow:0 8px 30px #a8175a40}
  .drama-detail-genres a:hover{background:#ff569f35;color:#fff8fb}
  .drama-detail-episode:hover{border-color:transparent;background:#191b24;color:var(--pink)}
  .drama-detail-tabs button:hover,.drama-detail-breadcrumb a:hover,.drama-detail-all-episodes:hover,.drama-detail-related-card a:hover h3{color:var(--pink-soft)}
  .drama-detail-related-card a:hover img{filter:brightness(1.08)}
}
@media(min-width:1600px){
  .drama-detail{column-gap:72px;padding-inline-end:max(110px,calc((100vw - 1440px)/2))}
  .drama-detail-hero-info{padding-inline-start:max(120px,calc((100vw - 1122px)/2))}
}
@media(max-width:1199px) and (min-width:1025px){
  .drama-detail{column-gap:32px;padding-inline-end:32px}
  .drama-detail-hero-info{padding-inline-start:48px;padding-inline-end:32px;padding-bottom:48px}
  [dir=rtl] .drama-detail-hero-info{padding-inline-start:48px;padding-inline-end:32px}
  .drama-detail-hero h1{font-size:32px;line-height:42px}
  .drama-detail-tabs{gap:20px}
}
@media(max-width:1024px){
  .drama-detail{display:flex;flex-direction:column;gap:0;width:100%;max-width:100%;padding:0}
  .drama-detail-content{display:contents}
  .drama-detail-breadcrumb{order:-1;align-self:stretch;margin:18px 16px 8px;font-size:12px;line-height:20px}
  .drama-detail-hero{position:relative;top:auto;width:100%;height:clamp(440px,122.6667vw,680px);min-height:0}
  .drama-detail-art{object-position:center 32%}
  .drama-detail-hero::after{background:linear-gradient(180deg,#00000000 10%,#00000016 32%,#000000a6 57%,#000000e6 78%,#000000f5 100%)}
  .drama-detail-hero-info,[dir=rtl] .drama-detail-hero-info{padding:24px 16px 20px}
  .drama-detail-hero h1{font-size:20px;line-height:28px;letter-spacing:-.02em}
  .drama-detail-synopsis{margin-top:12px;font-size:14px;line-height:20px}
  .drama-detail-genres{gap:6px;margin-top:12px}
  .drama-detail-genres a{min-height:26px;padding:3px 8px;font-size:14px;line-height:20px}
  .drama-detail-actions{gap:16px;margin-top:20px}
  .drama-detail-play{min-height:40px;padding-block:7px;font-size:14px;line-height:24px}
  .drama-detail-episode-total{font-size:11px;line-height:17px}
  .drama-detail-episode-total strong{font-size:13px}
  .drama-detail-chapters{order:1;width:100%;margin-top:32px;padding-inline:16px}
  .drama-detail-chapter-heading{gap:12px}
  .drama-detail-tabs{gap:28px;padding-inline:10px}
  .drama-detail-episode-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .drama-detail-related{order:2;width:100%;margin:60px 0 56px;padding-inline:16px}
  .drama-detail-related-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
}
@media(max-width:639px){
  .drama-detail-related-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 4px}
  .drama-detail-related h2{font-size:28px;line-height:1.4}
  .drama-detail-related-grid{margin-top:24px}
  .drama-detail-all-episodes{max-width:40%;font-size:11px}
}
@media(max-width:359px){
  .drama-detail-tabs{gap:20px;padding-inline:6px}
  .drama-detail-tabs button{font-size:12px}
  .drama-detail-episode{font-size:14px}
  .drama-detail-play{min-width:132px;padding-inline:16px}
  .drama-detail-episode-total{max-width:calc(100% - 148px)}
}
@media(prefers-reduced-motion:reduce){
  .drama-detail *{transition:none;scroll-behavior:auto}
}