:root{
  --bg:#0b0b0d;
  --bg-alt:#131215;
  --card:#18171b;
  --card-hover:#201f24;
  --red:#c8203a;
  --gold:#d4af37;
  --text:#ede9e4;
  --muted:#8d8a92;
  --line:#2a292e;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{ background:var(--bg); color:var(--text); font-family:'Noto Sans KR', sans-serif; min-height:100vh; }
::selection{ background:var(--red); color:#fff; }
a{ color:inherit; text-decoration:none; }

header{ position:sticky; top:0; z-index:50; background:rgba(11,11,13,.92); backdrop-filter: blur(8px); border-bottom:1px solid var(--line); }
.header-inner{ max-width:1200px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ font-family:'Black Han Sans', sans-serif; font-size:26px; letter-spacing:1px; display:flex; align-items:baseline; gap:6px; cursor:pointer; }
.logo span{ color:var(--red); }
nav.tabs{ display:flex; gap:4px; }
.tab-btn{ background:none; border:none; color:var(--muted); font-family:'Noto Sans KR'; font-weight:700; font-size:14px; padding:10px 16px; cursor:pointer; letter-spacing:.5px; border-bottom:2px solid transparent; transition:.15s; display:inline-block; }
.tab-btn.active, .tab-btn:hover{ color:var(--text); border-bottom-color:var(--red); }

.search-wrap{ position:relative; flex:1; max-width:360px; }
.search-wrap input{ width:100%; background:var(--bg-alt); border:1px solid var(--line); color:var(--text); padding:10px 14px; font-family:'Noto Sans KR'; font-size:14px; outline:none; }
.search-wrap input:focus{ border-color:var(--red); }
.search-results{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--card); border:1px solid var(--line); max-height:420px; overflow-y:auto; z-index:60; display:none; }
.search-results.show{ display:block; }
.sr-item{ display:flex; gap:10px; padding:8px 10px; cursor:pointer; border-bottom:1px solid var(--line); }
.sr-item:hover{ background:var(--card-hover); }
.sr-item img{ width:36px; height:54px; object-fit:cover; background:var(--bg-alt); flex-shrink:0; }
.sr-item .sr-meta{ font-size:12px; color:var(--muted); }
.sr-item .sr-title{ font-weight:700; font-size:13px; }

main{ max-width:1200px; margin:0 auto; padding:0 24px 80px; }

#hero{ position:relative; height:56vh; min-height:380px; display:flex; align-items:flex-end; margin:0 -24px 40px; overflow:hidden; background:var(--bg-alt); }
#hero .hero-bg, .detail-hero .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center top; }
#hero .hero-fade, .detail-hero .hero-fade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,13,0) 0%, rgba(11,11,13,.55) 55%, var(--bg) 100%), linear-gradient(90deg, rgba(11,11,13,.85) 0%, rgba(11,11,13,0) 55%); }
.hero-content{ position:relative; padding:0 48px 40px; max-width:640px; }
.hero-eyebrow{ font-size:12px; letter-spacing:3px; color:var(--red); font-weight:700; margin-bottom:10px; }
.hero-title{ font-family:'Black Han Sans'; font-size:44px; line-height:1.1; margin-bottom:12px; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.hero-overview{ font-size:14px; line-height:1.7; opacity:.9; margin-bottom:20px; max-width:520px; }
.hero-btn{ background:var(--red); color:#fff; border:none; padding:12px 26px; font-weight:700; font-size:14px; cursor:pointer; letter-spacing:.5px; display:inline-flex; align-items:center; gap:8px; }
.hero-btn:hover{ background:#e0263f; }

section.row{ margin-bottom:44px; }
.row-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; border-left:4px solid var(--red); padding-left:12px; }
.row-head h2{ font-family:'Black Han Sans'; font-size:22px; letter-spacing:.5px; }
.row-head .row-num{ color:var(--muted); font-size:13px; font-weight:700; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:18px; }
.poster-card{ cursor:pointer; position:relative; display:block; }
.poster-frame{ position:relative; aspect-ratio:2/3; background:var(--card); overflow:hidden; border:1px solid var(--line); transition:transform .18s, border-color .18s; }
.poster-card:hover .poster-frame{ transform:translateY(-4px); border-color:var(--red); }
.poster-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.poster-badge{ position:absolute; top:6px; right:6px; background:rgba(0,0,0,.75); color:var(--gold); font-size:11px; font-weight:700; padding:2px 6px; display:flex; align-items:center; gap:3px; }
.poster-title{ margin-top:8px; font-size:13px; font-weight:700; line-height:1.35; }
.poster-sub{ font-size:11px; color:var(--muted); margin-top:2px; }

.loading, .empty{ color:var(--muted); padding:40px 0; text-align:center; font-size:14px; }

.back-btn{ display:inline-block; background:none; border:1px solid var(--line); color:var(--muted); padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; margin:24px 0 20px; letter-spacing:.5px; }
.back-btn:hover{ color:var(--text); border-color:var(--red); }

.detail-hero{ position:relative; min-height:340px; margin:0 -24px 32px; padding:40px 48px; display:flex; gap:32px; align-items:flex-end; flex-wrap:wrap; }
.detail-poster{ position:relative; width:180px; flex-shrink:0; border:3px solid var(--bg); box-shadow:0 8px 30px rgba(0,0,0,.6); }
.detail-poster img{ width:100%; display:block; }
.detail-info{ position:relative; flex:1; min-width:280px; padding-bottom:6px; }
.detail-eyebrow{ color:var(--red); font-size:12px; font-weight:700; letter-spacing:3px; margin-bottom:8px; }
.detail-title{ font-family:'Black Han Sans'; font-size:38px; line-height:1.15; margin-bottom:6px; }
.detail-orig{ color:var(--muted); font-size:14px; margin-bottom:14px; }
.detail-meta{ display:flex; flex-wrap:wrap; gap:14px; font-size:13px; margin-bottom:16px; }
.detail-meta .star{ color:var(--gold); }
.genre-pill{ border:1px solid var(--line); padding:4px 12px; font-size:12px; color:var(--muted); }
.genre-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tagline{ font-style:italic; color:var(--muted); font-size:14px; margin-bottom:10px; }

.section-block{ margin-bottom:40px; }
.section-block h3{ font-family:'Black Han Sans'; font-size:20px; margin-bottom:14px; border-left:4px solid var(--red); padding-left:12px; }
.bio-text{ font-size:15px; line-height:1.9; opacity:.92; max-width:820px; white-space:pre-line; }

.cast-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:16px; }
.cast-card img{ width:100%; aspect-ratio:2/3; object-fit:cover; background:var(--card); border:1px solid var(--line); }
.cast-name{ font-size:12px; font-weight:700; margin-top:6px; }
.cast-role{ font-size:11px; color:var(--muted); }

.trailer-wrap{ position:relative; width:100%; max-width:860px; aspect-ratio:16/9; background:var(--card); border:1px solid var(--line); }
.trailer-wrap iframe{ width:100%; height:100%; border:none; }
.no-trailer{ color:var(--muted); font-size:14px; padding:24px; border:1px dashed var(--line); max-width:860px; }

.season-list{ display:flex; flex-direction:column; gap:10px; max-width:900px; }
.season-item{ border:1px solid var(--line); background:var(--card); }
.season-head{ display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; }
.season-head:hover{ background:var(--card-hover); }
.season-head img{ width:46px; height:68px; object-fit:cover; background:var(--bg-alt); }
.season-head .s-title{ font-weight:700; font-size:15px; }
.season-head .s-meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.season-head .chev{ margin-left:auto; color:var(--muted); transition:transform .15s; }
.season-item.open .chev{ transform:rotate(90deg); color:var(--red); }
.episode-panel{ display:none; border-top:1px solid var(--line); padding:8px 16px 16px; }
.season-item.open .episode-panel{ display:block; }
.episode-row{ display:flex; gap:14px; padding:12px 6px; border-bottom:1px solid var(--line); }
.episode-row:last-child{ border-bottom:none; }
.episode-row:hover{ background:var(--card-hover); }
.episode-row img{ width:120px; height:68px; object-fit:cover; background:var(--bg-alt); flex-shrink:0; }
.ep-num{ color:var(--red); font-weight:900; font-size:13px; margin-bottom:2px; }
.ep-title{ font-weight:700; font-size:14px; margin-bottom:4px; }
.ep-meta{ font-size:11px; color:var(--muted); margin-bottom:6px; }
.ep-overview{ font-size:12.5px; color:var(--muted); line-height:1.6; max-width:640px; }

footer{ border-top:1px solid var(--line); padding:24px; text-align:center; color:var(--muted); font-size:12px; max-width:1200px; margin:0 auto; }
footer a{ color:var(--muted); }

@media (max-width:640px){
  .hero-title, .detail-title{ font-size:28px; }
  #hero{ height:auto; padding-top:60vw; }
  .hero-content{ padding:0 20px 28px; }
  .detail-hero{ padding:24px 20px; flex-direction:column; margin:0 -20px 24px; }
  header .header-inner{ flex-wrap:wrap; gap:12px; }
  .search-wrap{ order:3; max-width:100%; }
  main{ padding:0 20px 80px; }
}
/* ===========================
   ACTION BUTTONS
=========================== */

.action-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
}

.action-buttons a,
.action-buttons button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    border-radius:8px;
    font-size:14px;
    font-weight:700;
    color:#fff;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:.25s;
}

.btn-watch{
    background:#e50914;
}

.btn-trailer{
    background:#ff9800;
}

.btn-imdb{
    background:#f5c518;
    color:#111 !important;
}

.btn-tmdb{
    background:#01b4e4;
}

.btn-share{
    background:#16a34a;
}

.action-buttons a:hover,
.action-buttons button:hover{
    transform:translateY(-3px);
    opacity:.9;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.watch-section{
    margin:30px 0;
}

.btn-watch-bottom{
    display:block;
    width:100%;
    max-width:860px;
    margin:0 auto;
    text-align:center;
    background:#ff0000;
    color:#fff;
    text-decoration:none;
    font-size:26px;
    font-weight:700;
    padding:22px;
    border-radius:12px;
    transition:.25s;
}

.btn-watch-bottom:hover{
    background:#d90000;
}
/* ===== Similar Movies ===== */

.similar-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:16px;
    margin-top:18px;
}

.similar-grid .poster-card{
    text-decoration:none;
    color:#fff;
    transition:.25s;
}

.similar-grid .poster-card:hover{
    transform:translateY(-5px);
}

.similar-grid img{
    width:100%;
    border-radius:10px;
    display:block;
}

.similar-grid .poster-title{
    margin-top:8px;
    font-size:14px;
    text-align:center;
}
/* Breadcrumb */
.breadcrumb{
    max-width:1200px;
    margin:15px auto;
    padding:0 20px;
    font-size:14px;
    color:#aaa;
}

.breadcrumb a{
    color:#e50914;
    text-decoration:none;
}

.breadcrumb a:hover{
    text-decoration:underline;
}

.breadcrumb span{
    color:#fff;
}
.detail-overview{
    margin:24px 0;
}

.detail-overview h2{
    font-size:24px;
    color:#fff;
    margin-bottom:12px;
    border-left:4px solid #e50914;
    padding-left:12px;
}

.detail-overview p{
    color:#ccc;
    line-height:1.9;
    font-size:16px;
}

.genre-row{
    margin-top:24px;
}