@charset "utf-8";
/* ============================================================
   C. 영상 포털형 — 밈더하기
   Design System: Webflow  (C_designSystem_Webflow.md)

   핵심 규칙
   - 흰 캔버스 + 니어블랙 #080808 이 브랜드. 다크 테마에서 반전
   - 5색 크로매틱 액센트(purple/pink/blue/orange/green)는
     카테고리 카드의 풀 필로만. 버튼 배경으로 쓰지 않는다
   - 버튼 4px, 카드 8px. 필(9999px)은 원형 아이콘 컨테이너 전용
   - 웨이트 상한 600. 700 이상 금지
   - 디스플레이는 네거티브 트래킹(-0.8px), 아이브로우는 대문자 +1.5px
   - 레이어드 멀티스톱 드롭섀도가 유일한 엘리베이션 장치
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* 앵커 이동 시 스티키 헤더가 대상 제목을 덮지 않게 한다.
   페이지 간 이동 · 같은 페이지 클릭 · 뒤로가기 모두 여기서 처리된다. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- tokens ---------- */
:root{
  /* Brand */
  --primary:#080808;
  --canvas:#fff;
  --hairline:#d8d8d8;

  /* Chromatic accents — 카테고리 서피스 전용 */
  --purple:#7a3dff;
  --pink:#ed52cb;
  --blue:#3b89ff;
  --green:#12a150;
  --amber:#e8890c;
  --blue-deep:#006acc;
  --blue-info:#146ef5;
  --orange:#ff6b00;
  --brand:#fe5c01;   /* 로고 색 — 웹하드 발산 카드에 사용 */
  --yellow:#ffae13;
  --red:#ee1d36;

  /* Text */
  --ink:#080808;
  --ink-strong:#222;
  --body:#363636;
  --body-mid:#5a5a5a;
  --mute:#898989;
  --mute-soft:#ababab;
  --on-primary:#fff;

  /* Radius */
  --r-xs:2px;
  --r-sm:4px;
  --r-md:8px;
  --r-full:9999px;

  /* Spacing — 4px base */
  --xxs:2px; --xs:4px; --sm:8px; --md:12px;
  --lg:16px; --xl:20px; --x2:24px; --x3:32px;
  --band:96px;

  /* Type */
  --d-xxl:80px;
  --d-xl:56px;
  --d-lg:44.8px;
  --d-md:32px;
  --d-sm:24px;
  --d-xs:20px;
  --body-lg:28.8px;
  --body-md:16px;
  --body-sm:14px;
  --caption:12.8px;

  /* Elevation — 레이어드 멀티스톱 */
  --lift:0 84px 24px rgba(0,0,0,0), 0 54px 22px rgba(0,0,0,.01),
         0 30px 18px rgba(0,0,0,.04), 0 13px 13px rgba(0,0,0,.08),
         0 3px 7px rgba(0,0,0,.09);
  --lift-strong:0 84px 24px rgba(0,0,0,0), 0 54px 22px rgba(0,0,0,.02),
         0 30px 18px rgba(0,0,0,.05), 0 13px 13px rgba(0,0,0,.09),
         0 3px 7px rgba(0,0,0,.12);

  --measure:40rem;
  --w:1320px;
  --side:var(--x3);
}

/* ---------- 포인트 서체 ---------- */
/* 어그로체(SB Aggro) — 지적재산권 ㈜샌드박스네트워크

   개인·기업 모두 무료. 영리·비영리 사용, 수정·재배포 가능. 출처 표기를 요구하지
   않아 화면 푸터에서 빼고 여기로 옮겼다 (2026-08-21). 조건 전문은 font/LICENSE.txt.
   라이선스 안내: https://sandbox.co.kr/font

   이 시스템은 웨이트 상한 600 이다. 어그로체에는 600 이 없고 300/500/700 뿐이라
   상한을 넘지 않는 Medium 500 만 싣는다. Bold 700 은 쓰지 않는다.
   서브셋 결과 20KB (원본 232KB). 문구를 바꾸면 _verify/subset_fonts.py 재실행. */
@font-face{
  font-family:"Aggro";
  src:url("../font/SBAggroM.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

/* ---------- base ---------- */
body{
  /* WF Visual Sans Variable 은 비공개 → 문서가 지정한 오픈소스 대체 Inter 사용.
     한글 글리프는 Pretendard 가 받는다. */
  font-family:"Inter","Pretendard Variable","Pretendard","Apple SD Gothic Neo",
    Arial,system-ui,-apple-system,"Malgun Gothic","맑은 고딕",sans-serif;
  font-size:var(--body-md);
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.16px;
  color:var(--body);
  background:var(--canvas);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
.inner{max-width:var(--w);margin:0 auto;padding:0 var(--side)}
.blind{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 아이브로우 — 브랜드 시그니처 라벨 */
.eyebrow{display:block;font-size:15px;font-weight:500;line-height:1.3;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--mute);margin-bottom:var(--md)}
.eyebrow--sm{font-size:12px;letter-spacing:.6px;line-height:1}

/* ============================================================
   header
   ============================================================ */
.topbar{position:sticky;top:0;z-index:80;background:var(--canvas);
  border-bottom:1px solid var(--hairline)}
.topbar__in{max-width:var(--w);margin:0 auto;padding:var(--lg) var(--side);
  display:flex;align-items:center;gap:var(--x3);min-height:72px}

.brand{display:flex;align-items:center;gap:var(--sm);flex:none}
.brand__dot{width:30px;height:30px;border-radius:var(--r-md);display:block;flex:none}
/* 브랜드명 — 어그로체. 시스템 웨이트 상한이 600 인데 어그로체에는 600 이 없어
   상한을 넘지 않는 Medium 500 을 쓴다. 자간은 조이지 않는다. */
.brand__name{font-size:var(--body-md);font-weight:500;color:var(--ink);
  font-family:"Aggro","Inter","Pretendard Variable","Pretendard",sans-serif;
  letter-spacing:0;white-space:nowrap}

.menu{display:flex;gap:var(--x2);flex:1}
.menu__a{font-size:var(--body-sm);font-weight:500;line-height:1.6;color:var(--ink);
  white-space:nowrap;padding:var(--sm) 0;border-bottom:2px solid transparent}
.menu__a:hover{border-bottom-color:var(--hairline)}
.menu__a.on{border-bottom-color:var(--primary)}
.menu__a.rank{color:var(--blue-deep)}

.tools{display:flex;align-items:center;gap:var(--sm);flex:none}
.icobtn{width:40px;height:40px;border-radius:var(--r-full);display:grid;place-items:center;
  color:var(--ink);border:1px solid var(--hairline);background:var(--canvas)}
.icobtn:hover{border-color:var(--primary)}
.burger{display:none}

/* ============================================================
   hero — 흰 밴드, 80px 디스플레이
   ============================================================ */
.hero{border-bottom:1px solid var(--hairline);background:var(--canvas);
  position:relative;overflow:hidden;isolation:isolate}
/* 백드롭 배경 — 크게 흐려 색만 남긴다. 흰 베일로 본문 가독성을 지킨다.
   좌측(텍스트)은 진하게, 우측(포스터)은 옅게 덮어 이미지가 살짝 비치게 한다. */
.hero__back{position:absolute;inset:0;z-index:-1}
/* 슬라이드 — 배경·텍스트·포스터 세 그룹이 같은 data-slide 로 함께 전환된다.
   JS 가 없으면 0번만 보이므로 정보 손실이 없다. */
.hero__backimg{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.hero__backimg.is-on{opacity:1}
.hero__slide{display:none}
.hero__slide.is-on{display:block}
.hero__posters{position:relative;width:300px;aspect-ratio:2/3;flex:none}
.hero__backimg{width:100%;height:100%;object-fit:cover;object-position:center 32%}
/* 텍스트가 놓이는 좌측은 완전한 흰색으로 덮고, 우측으로 갈수록 걷어 이미지를 그대로 보여준다.
   블러 대신 그라데이션으로 처리하므로 스틸의 디테일이 살아 있다. */
.hero__back::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%,#fff 36%,rgba(255,255,255,.82) 50%,
    rgba(255,255,255,.28) 74%,rgba(255,255,255,0) 100%)}
.hero__body{max-width:var(--w);margin:0 auto;padding:var(--band) var(--side);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--x3);align-items:center;
  position:relative}
.hero__inner{max-width:640px}
/* 포스터 — 무슨 작품인지 한눈에. 배경 스틸과 역할을 나눈다.
   슬라이드끼리 겹쳐 두고 활성 1장만 보인다 (레이아웃 이동 없음). */
.hero__poster{position:absolute;inset:0;border-radius:var(--r-md);
  overflow:hidden;display:block;box-shadow:var(--lift-strong);background:#f4f4f4;
  opacity:0;pointer-events:none;transition:opacity .35s ease,transform .18s}
.hero__poster.is-on{opacity:1;pointer-events:auto}
.hero__poster.is-on:hover{transform:translateY(-4px)}
.hero__posterimg{width:100%;height:100%;object-fit:cover;display:block}
.hero__flag{display:inline-block;font-size:var(--caption);font-weight:550;line-height:1.2;
  color:var(--on-primary);background:var(--blue-info);padding:var(--xs) var(--md);
  border-radius:var(--r-sm);margin-bottom:var(--lg)}
/* 어그로체는 획이 굵고 자간이 넓다. letter-spacing 을 본문 규칙만큼 조이지 않는다.
   2026-10-06: Aggro 서브셋을 한글 완성형 음절 전체로 확장해 둬서(subset_fonts.py
   FULL_CHARSET_SITES), 동적으로 바뀌는 작품명이 와도 글자가 깨지지 않는다. */
.hero__title{font-size:var(--d-xxl);line-height:1.14;font-weight:500;letter-spacing:-.2px;
  font-family:"Aggro","Inter","Pretendard Variable","Pretendard",sans-serif;
  color:var(--ink);margin-bottom:var(--lg);text-wrap:balance}
.hero__meta{font-size:var(--body-sm);color:var(--mute);margin-bottom:var(--md);letter-spacing:0}
/* 작품마다 줄거리 길이가 달라 슬라이드가 넘어갈 때 히어로 높이가 들썩였다.
   2줄로 고정하고 넘치면 말줄임 — 짧은 설명도 min-height 로 자리를 채운다. */
.hero__desc{font-size:var(--body-md);color:var(--body);margin-bottom:var(--x2);
  max-width:34rem;line-height:1.6;min-height:3.2em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;text-overflow:ellipsis}
.hero__acts{display:flex;gap:var(--md);flex-wrap:wrap;align-items:center}
.hero__ctrl{display:flex;align-items:center;gap:var(--lg);margin-top:var(--x2)}
.hero__dots{display:flex;gap:var(--sm)}
.hero__dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--hairline);
  display:block;cursor:pointer;border:0;padding:0;transition:width .2s,background .2s}
.hero__dot.is-on{background:var(--primary);width:26px;border-radius:var(--r-sm)}
.hero__dot:focus-visible{outline:2px solid var(--blue-info);outline-offset:3px}

/* ============================================================
   buttons — 4px, 액센트 색을 배경으로 쓰지 않는다
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sm);
  border-radius:var(--r-sm);font-size:var(--body-md);font-weight:500;line-height:1.6;
  letter-spacing:-.16px;text-align:center;white-space:nowrap;padding:var(--md) var(--xl);
  transition:background .14s,border-color .14s,color .14s}
.btn--main{background:var(--primary);color:var(--on-primary)}
.btn--main:hover{background:#000}
.btn--gold{background:var(--primary);color:var(--on-primary)}
.btn--gold:hover{background:#000}
.btn--sub{background:var(--canvas);color:var(--ink);border:1px solid var(--hairline)}
.btn--sub:hover{border-color:var(--primary)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline)}
.btn--ghost:hover{border-color:var(--primary)}
.btn--sm{padding:var(--sm) var(--lg);font-size:var(--body-sm);letter-spacing:0}
.btn--wide{width:100%}
/* 텍스트+화살표 링크 */
.btn--text{padding:var(--sm) 0;border:0;background:transparent;text-decoration:underline;
  text-underline-offset:4px}

/* ============================================================
   sections + rail
   ============================================================ */
.sect{padding:var(--band) 0 0}
.sect__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--lg);
  margin-bottom:var(--x2)}
.sect__title{font-size:var(--d-lg);font-weight:500;line-height:1.18;letter-spacing:0;
  font-family:"Aggro","Inter","Pretendard Variable","Pretendard",sans-serif;
  color:var(--ink)}
.sect__more{font-size:var(--body-sm);font-weight:500;color:var(--ink);white-space:nowrap;
  flex:none;text-decoration:underline;text-underline-offset:4px}
.sect__sub{font-size:var(--body-sm);color:var(--mute);margin-top:var(--sm);letter-spacing:0}

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5*16px)/6);
  gap:var(--lg);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--lg);
  scrollbar-width:thin;scrollbar-color:var(--hairline) transparent}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:var(--r-full)}
.rail > *{scroll-snap-align:start}
.rail:focus-visible{outline:2px solid var(--blue-info);outline-offset:6px;border-radius:var(--r-md)}

/* 카드 */
.card{display:block}
.card__art{position:relative;aspect-ratio:2/3;border-radius:var(--r-md);overflow:hidden;
  background:#f4f4f4;border:1px solid var(--hairline);display:grid;place-items:center;
  color:var(--mute-soft);font-size:var(--caption);
  transition:box-shadow .18s,transform .18s}
.card:hover .card__art{box-shadow:var(--lift);transform:translateY(-4px)}
.card:focus-visible{outline:none}
.card:focus-visible .card__art{outline:2px solid var(--blue-info);outline-offset:3px}
/* 포스터 이미지 — 컨테이너가 2:3 을 고정하므로 이미지는 채우기만 한다.
   TMDB 포스터도 2:3 이라 cover 로 잘리는 부분은 사실상 없다.
   로드 전/실패 시에는 .card__art 의 회색 배경이 그대로 보인다. */
.card__img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.card__no{position:absolute;left:var(--sm);top:var(--sm);min-width:26px;height:26px;
  padding:0 var(--sm);border-radius:var(--r-sm);background:var(--primary);color:var(--on-primary);
  font-size:var(--caption);font-weight:500;display:grid;place-items:center;
  font-family:"Aggro","Inter","Pretendard Variable","Pretendard",sans-serif;
  font-variant-numeric:tabular-nums}
.card__flag{position:absolute;right:var(--sm);top:var(--sm);font-size:var(--caption);
  font-weight:550;padding:var(--xs) var(--sm);border-radius:var(--r-sm);
  background:var(--blue-info);color:var(--on-primary);line-height:1.2}
/* 급상승 배지 — 브랜드 색으로 통일. 텍스트는 흰색이라 대비가 충분하다. */
.card__flag--up{background:var(--brand);color:var(--on-primary)}
.card__name{font-size:var(--body-sm);font-weight:500;color:var(--ink);margin-top:var(--md);
  line-height:1.5;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__meta{font-size:var(--caption);color:var(--mute);margin-top:var(--xs);letter-spacing:0}

/* ============================================================
   카테고리 카드 — 5색 풀 필 (브랜드 시그니처)
   ============================================================ */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--lg)}
.cat{border-radius:var(--r-md);padding:var(--x3);min-height:180px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:var(--on-primary);transition:transform .18s}
.cat:hover{transform:translateY(-4px)}
.cat__name{font-size:var(--d-sm);font-weight:500;line-height:1.3;letter-spacing:0;
  font-family:"Aggro","Inter","Pretendard Variable","Pretendard",sans-serif;}
.cat__count{font-size:var(--body-sm);opacity:.86;letter-spacing:0}
.cat__arrow{width:32px;height:32px;border-radius:var(--r-full);
  background:rgba(255,255,255,.22);display:grid;place-items:center;margin-top:var(--x2)}
.cat__arrow svg{width:16px;height:16px}
.cat--purple{background:var(--purple)}
.cat--pink{background:var(--pink)}
.cat--blue{background:var(--blue)}
.cat--green{background:var(--green)}
.cat--amber{background:var(--amber)}
/* 그린은 밝아 가독성 확보 위해 잉크 텍스트 */
/* 웹하드 발산 카드 — 로고 색(#fe5c01)에 맞춘다. 텍스트는 흰색. */
.cat--brand{background:var(--brand);color:var(--on-primary)}
.cat--brand .cat__arrow{background:rgba(255,255,255,.22)}

/* ============================================================
   CTA — 폴래리티 반전 카드 (액센트가 아닌 니어블랙)
   ============================================================ */
/* 하단 발산 — 브랜드명만 나열하지 않고 '어떤 경우에 유리한지' 를 함께 준다.
   순위가 아니라 확인된 사실의 나열이다. */
.cta{margin-top:var(--band);border-radius:var(--r-md);background:var(--primary);
  color:var(--on-primary);padding:var(--x3);display:block}
.cta__head{max-width:56ch}
.cta__picks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md);
  margin-top:var(--x2)}
.pick{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);padding:var(--xl)}
.pick__case{display:block;font-size:var(--caption);letter-spacing:.4px;
  color:rgba(255,255,255,.6);margin-bottom:var(--sm)}
.pick__name{display:inline-block;font-size:var(--d-xs);font-weight:500;
  font-family:"Aggro","Inter","Pretendard Variable","Pretendard",sans-serif;
  color:var(--on-primary);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.4)}
.pick__name:hover{text-decoration-color:var(--on-primary)}
.pick__fact{display:block;font-size:var(--body-sm);line-height:1.6;
  color:rgba(255,255,255,.78);margin-top:var(--sm)}
.cta__note{font-size:var(--caption);color:rgba(255,255,255,.55);
  margin-top:var(--xl);line-height:1.6}
.cta--foot{text-align:left}
.cta--foot .cta__d{margin:0}
.cta__t{font-size:var(--d-md);font-weight:500;line-height:1.3;letter-spacing:0;
  font-family:"Aggro","Inter","Pretendard Variable","Pretendard",sans-serif;
  margin-bottom:var(--sm)}
.cta__d{font-size:var(--body-md);color:rgba(255,255,255,.76);max-width:46ch;line-height:1.6}
.cta__d b{color:var(--on-primary);font-weight:500}
.cta__acts{display:flex;gap:var(--md);flex:none;flex-wrap:wrap;align-items:center}
.cta .btn--main,.cta .btn--gold{background:var(--canvas);color:var(--ink)}
.cta .btn--main:hover,.cta .btn--gold:hover{background:#f0f0f0}
.cta .btn--sub{background:transparent;color:var(--on-primary);
  border-color:rgba(255,255,255,.34)}
.cta .btn--sub:hover{border-color:var(--on-primary)}

/* ============================================================
   본문 텍스트 블록
   ============================================================ */
.readblock{margin-top:var(--band);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:var(--x3)}
.readblock h2{font-size:var(--d-lg);font-weight:600;line-height:1.04;color:var(--ink);
  margin-bottom:var(--lg);max-width:24ch;text-wrap:balance}
.readblock h3{font-size:var(--d-sm);font-weight:500;line-height:1.3;color:var(--ink);
  margin:var(--x3) 0 var(--md);max-width:30ch}
.readblock p{color:var(--body);margin-bottom:var(--lg);max-width:var(--measure)}
.readblock ul{margin:0 0 var(--lg);max-width:var(--measure)}
.readblock ul li{position:relative;padding-left:var(--lg);margin-bottom:var(--sm);
  color:var(--body)}
.readblock ul li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;
  border-radius:var(--r-full);background:var(--primary)}

/* 고르는 기준 — 아이콘 카드형. 필(9999px)은 원형 아이콘 컨테이너 전용이라는
   기존 규칙 그대로, 색은 크로매틱 액센트(카테고리 카드 전용) 대신 잉크 틴트로 */
.criteria{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--x2);margin:0 0 var(--lg);max-width:none;list-style:none}
.criteria li{padding-left:0;margin-bottom:0}
.criteria li::before{content:none}
.criteria__icon{width:44px;height:44px;border-radius:var(--r-full);flex:none;
  display:grid;place-items:center;background:rgba(8,8,8,.045);color:var(--ink);
  margin-bottom:var(--sm)}
.criteria__icon svg{width:22px;height:22px}
.criteria__t{display:block;font-size:var(--body-md);font-weight:500;color:var(--ink);
  margin-bottom:var(--xxs)}
.criteria__d{display:block;font-size:var(--body-sm);color:var(--mute);line-height:1.5}
.readblock strong{color:var(--ink);font-weight:500}

/* 결론 우선 블록 — 좌측 바 없이 아이브로우 + 타입 사이즈로만 강조.
   Webflow 가 실제로 쓰는 방식(대문자 아이브로우 + 큰 본문)을 따른다. */
.lead{margin:var(--x2) 0 var(--x2);max-width:var(--measure)}
.lead__tag{display:block;font-size:12px;font-weight:500;letter-spacing:.6px;
  text-transform:uppercase;color:var(--mute);margin-bottom:var(--sm)}
.lead p{color:var(--ink);font-size:var(--d-xs);font-weight:500;margin:0;max-width:none;
  line-height:1.5;letter-spacing:-.2px}

/* ============================================================
   상세 페이지
   ============================================================ */
/* 16:9 백드롭을 너무 낮게 자르면 인물이 사라진다. 320px 는 원래 의도한 밴드 높이. */
.backdrop{border-bottom:1px solid var(--hairline);background:#f4f4f4;height:240px;
  position:relative;overflow:hidden}
.backdrop__img{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--mute-soft);font-size:var(--body-sm)}
/* 인물이 상단에 몰려 있어 위쪽을 살린다 */
.backdrop__pic{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;display:block}
/* 텍스트는 백드롭 아래에서 시작하므로 전체를 덮을 필요가 없다.
   하단만 페이드해 흰 페이지로 자연스럽게 이어지게 한다. */
.backdrop::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 46%,rgba(255,255,255,.92) 100%)}
/* backdrop_path 가 없는 작품은 자기 포스터를 흐리게 깔아 배경으로 쓴다.
   다른 작품의 스틸을 돌려쓰지 않기 위한 처리다. */
.backdrop__pic--soft{filter:blur(28px) saturate(1.1);transform:scale(1.12);
  object-position:center 38%}
.backdrop__fade{display:none}

.crumb{font-size:var(--body-sm);color:var(--mute);padding:var(--lg) 0 0;letter-spacing:0}
.crumb a:hover{text-decoration:underline}
.crumb span{margin:0 var(--sm);color:var(--hairline)}

/* 백드롭 위로 끌어올리는 것은 포스터만이다.
   .title 전체에 음수 마진을 걸면 본문 첫 줄(브레드크럼)이 백드롭 경계선을 물어
   어긋나 보인다. 포스터에만 걸면 백드롭 높이를 바꿔도 본문은 늘 경계선 아래다. */
.title{display:flex;gap:var(--x3);position:relative;z-index:2;
  padding:var(--lg) 0 var(--x2)}
/* align-self 를 주지 않으면 flex 의 stretch 가 aspect-ratio 를 덮어써
   본문 길이만큼 포스터가 늘어난다. */
.title__poster{flex:none;align-self:flex-start;margin-top:-88px;width:180px;aspect-ratio:2/3;
  border-radius:var(--r-md);
  background:#f4f4f4;border:1px solid var(--hairline);display:grid;place-items:center;
  color:var(--mute-soft);font-size:var(--caption);box-shadow:var(--lift-strong);
  overflow:hidden}
.title__img{width:100%;height:100%;object-fit:cover;display:block}
.title__body{min-width:0}
.title__h1{font-size:var(--d-xl);line-height:1.16;font-weight:500;letter-spacing:-.2px;
  font-family:"Aggro","Inter","Pretendard Variable","Pretendard",sans-serif;
  color:var(--ink);margin-bottom:var(--md);max-width:20ch}
.title__meta{font-size:var(--body-sm);color:var(--mute);margin-bottom:var(--lg);letter-spacing:0}
.title__meta em{font-style:normal;color:var(--hairline);margin:0 var(--sm)}
/* 줄거리. 별도 readblock 으로 두면 h2(44.8px)+패딩이 첫 화면을 다 먹어
   '어디서 볼 수 있나'가 접히므로 제목 블록 안에서 소화한다.
   포스터 오른쪽 빈 공간을 이 문단이 채운다. */
.title__desc{color:var(--body);max-width:var(--measure);line-height:1.7;margin:0}

/* ── 작품 정보 ──
   4열 카드 그리드였는데 항목이 2개뿐인 페이지가 많아 오른쪽 절반이 비었고,
   출연(1~7명)·장르(1~3개)·제작사(1~3곳)는 값 길이가 제각각이라 카드 안에서
   줄바꿈이 지저분했다. 항목이 6개든 9개든 모양이 유지되는 행 표로 쌓는다. */
.info{margin-top:var(--x3)}
/* 행(세로 쌓기) 대신 열(가로 나열) — 항목이 2~3개뿐이라 각자 카드처럼
   라벨 위·값 아래로 세워 나란히 두는 쪽이 한눈에 들어온다. */
.spec{margin:var(--lg) 0 0;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:var(--x3);padding-top:var(--md)}
.spec__i{display:flex;flex-direction:column;gap:var(--xs);flex:1 1 160px}
.spec__k{font-size:var(--caption);color:var(--mute);
  letter-spacing:.6px;text-transform:uppercase;line-height:1.4}
.spec__v{color:var(--ink);min-width:0;max-width:var(--measure)}

/* 시청 CTA */
.watch{margin:var(--lg) 0 var(--x3);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:var(--x3);box-shadow:var(--lift)}
.watch__h{font-size:var(--d-md);font-weight:500;line-height:1.3;color:var(--ink);
  margin-bottom:var(--sm);max-width:28ch}
.watch__group{margin-top:var(--x2)}
.watch__label{font-size:12px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mute);margin-bottom:var(--md);display:block}
/* OTT 도 같은 5열을 쓴다. 열 수가 달라지면 버튼 폭이 달라져
   두 그룹이 서로 다른 것으로 읽힌다. */
.watch__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--md)}
.wbtn{display:flex;align-items:center;justify-content:center;gap:var(--sm);
  padding:var(--lg) var(--md);border-radius:var(--r-sm);font-size:var(--body-sm);font-weight:500;
  background:var(--canvas);border:1px solid var(--hairline);color:var(--ink);
  text-align:center;line-height:1.4;letter-spacing:0}
.wbtn:hover{border-color:var(--primary)}
.wbtn__logo{width:96px;height:43px;object-fit:contain;display:block}
/* 로고 사용 조건이 확인되지 않은 서비스는 텍스트로 둔다.
   로고 43px + 상하 패딩 16px = 75px 이라 같은 값을 줘야 웹하드 버튼과 높이가 맞는다. */
.wbtn--text{min-height:75px}
.watch__foot{margin-top:var(--x2);padding-top:var(--lg);border-top:1px solid var(--hairline);
  display:flex;gap:var(--md);flex-wrap:wrap;align-items:center}
/* OTT 제공처가 확인되지 않은 상태 — 없는 것을 있다고 쓰지 않는다.
   tvN·MBC 는 방송사라 보낼 곳이 없으므로 버튼을 만들지 않고 이 박스로 둔다. */
.watch__empty{font-size:var(--body-sm);color:var(--mute);padding:var(--lg);
  border:1px dashed var(--hairline);border-radius:var(--r-md);background:#fafafa}
.watch__note{font-size:var(--body-sm);color:var(--mute);flex:1;min-width:220px;
  max-width:var(--measure);letter-spacing:0}
/* 공개 상태(극장 상영 중 · 넷플릭스 제공 등)를 이 문구가 흡수했다.
   회색 안내문에 묻히면 안 되는 사실이라 강조 처리한다. */
.watch__note strong{color:var(--ink);font-weight:500}

/* FAQ */
.faq{margin-top:var(--x3)}
.faq__i{border-top:1px solid var(--hairline);padding:var(--x2) 0}
.faq__i:last-child{border-bottom:1px solid var(--hairline)}
.faq__q{font-size:var(--d-xs);font-weight:500;line-height:1.4;color:var(--ink);
  margin-bottom:var(--sm);max-width:34ch}
.faq__a{color:var(--body);max-width:var(--measure)}
.faq__a strong{color:var(--ink);font-weight:500}


/* ============================================================
   footer
   ============================================================ */
.foot{margin-top:var(--band);border-top:1px solid var(--hairline);padding:var(--x3) 0}
.foot__nav{display:flex;flex-wrap:wrap;gap:var(--x2);font-size:var(--body-sm);
  margin-bottom:var(--lg)}
.foot__nav a{color:var(--body-mid)}
.foot__nav a:hover{color:var(--ink)}
.foot__note{font-size:var(--body-sm);color:var(--body-mid);line-height:1.6;max-width:70ch}
.foot__note a{color:var(--ink);text-decoration:underline}

/* ---------- 유틸 ---------- */
.u-mt1{margin-top:var(--sm)}
.u-mt2{margin-top:var(--lg)}
.u-mt3{margin-top:var(--x2)}
.u-mb1{margin-bottom:var(--sm)}
.u-mb2{margin-bottom:var(--lg)}
.crumb--flat{padding-top:0;margin-bottom:var(--md)}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1180px){
  :root{--d-xxl:64px;--d-xl:44px;--d-lg:36px}
  .rail{grid-auto-columns:calc((100% - 4*16px)/5)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .watch__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:991px){
  :root{--side:var(--x2);--band:64px;--d-xxl:52px}
  .hero__posters{width:200px;justify-self:start}
  .hero__body{grid-template-columns:1fr;gap:var(--x2)}
  /* 세로 배치라 텍스트가 위에 온다 — 그라데이션 방향을 세로로 바꾼다 */
  .hero__back::after{background:linear-gradient(180deg,#fff 0%,#fff 42%,
    rgba(255,255,255,.72) 68%,rgba(255,255,255,.35) 100%)}
  .rail{grid-auto-columns:calc((100% - 3*16px)/4)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cta{flex-direction:column;align-items:flex-start}
  .backdrop{height:210px}
  .title__poster{width:156px}
}
@media (max-width:767px){
  :root{--side:var(--lg);--band:48px;--d-xxl:36px;--d-xl:30px;--d-lg:28px;--d-md:24px;--d-sm:20px}
  .topbar__in{gap:var(--md);min-height:60px;padding:var(--md) var(--side)}
  .burger{display:grid}
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--canvas);border-bottom:1px solid var(--hairline);
    padding:0 var(--side) var(--md)}
  .menu[hidden]{display:none}
  .menu__a{padding:var(--lg) 0;border-bottom:1px solid var(--hairline);font-size:var(--body-md)}
  .menu__a:last-child{border-bottom:0}
  .menu__a.on{border-bottom-color:var(--hairline)}

  .hero__body{padding:var(--x3) var(--side)}
  .hero__acts .btn{flex:1 1 100%}
  .rail{grid-auto-columns:40%;gap:var(--md);
    margin:0 calc(var(--side) * -1);padding-left:var(--side);padding-right:var(--side)}
  .cats{grid-template-columns:1fr}
  .cat{min-height:0;padding:var(--x2)}
  .cta{padding:var(--x2)}
  .cta__acts{width:100%}
  .cta__acts .btn{flex:1 1 100%}
  .readblock{padding:var(--x2) var(--lg)}
  .backdrop{height:200px}
  .title{flex-direction:column;gap:var(--lg)}
  .title__poster{width:150px;margin-top:-72px}
  .watch{padding:var(--x2) var(--lg)}
  .watch__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:479px){
  .rail{grid-auto-columns:48%}
  .cta__picks{grid-template-columns:1fr}
  .watch__grid{grid-template-columns:1fr}
}

/* ---------- 접근성 ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
:focus-visible{outline:2px solid var(--blue-info);outline-offset:2px;border-radius:var(--r-sm)}