*{margin:0;padding:0;box-sizing:border-box}
body{background:#0A0B0D;color:#E9EDF0;font-family:Pretendard,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
 line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px 70px;position:relative;z-index:2}
/* 검은 기둥은 따로 한 장으로 깐다. 좌우는 가로 그라데이션으로 사진에 스미고,
   위쪽은 세로 마스크로 서서히 열린다. 조각을 나눠 붙이면 반드시 이음선이 생긴다. */
.wrap:before{content:'';position:absolute;top:-210px;bottom:0;left:50%;width:100vw;
 transform:translateX(-50%);z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,rgba(10,11,13,0) calc(50% - 810px),
  #0A0B0D calc(50% - 575px),#0A0B0D calc(50% + 575px),rgba(10,11,13,0) calc(50% + 810px));
 -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 210px);
 mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 210px)}
/* 두 단. 왼쪽은 읽는 것, 오른쪽은 훑는 것. */
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px;align-items:start}
.side{position:sticky;top:20px}
header{display:flex;align-items:center;padding:6px 0 22px}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:#E9EDF0}
.mark .nmk{height:44px;width:auto;display:block;overflow:visible;flex:none;
 filter:drop-shadow(0 0 9px rgba(108,171,221,.5))}
.mark .mkw{font-family:'Bebas Neue',Pretendard,sans-serif;font-size:36px;letter-spacing:.02em;
 font-weight:400;line-height:1}
.mark .mkw b{color:#6CABDD;font-weight:400}
/* 획 안쪽만 한 장면으로 채운다. 멀리서는 로고, 가까이서는 영화. */
.mark #nmshot{filter:contrast(1.35) saturate(1.15) brightness(1.06)}
/* 배경은 지면 전체의 벽지다. 화면에 붙어 있어서 글을 굴려도 그대로 있고,
   글이 놓인 가운데 기둥만 검게 덮는다. 좌우 여백에는 계속 보인다.
   기둥의 가장자리는 번지는 그림자로 흐려 경계가 칼처럼 서지 않게 한다. */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.bg img{width:100%;height:100%;object-fit:cover;object-position:center 22%;opacity:.55}
/* 어둠은 벽지 한 장이 통째로 진다. 제목 칸에만 걸어 두면 그 바닥에서 끊겨
   좌우 여백에 가로선이 생긴다. 붙박이라 끊길 자리가 없다. */
.bg:after{content:'';position:absolute;inset:0;background:
 linear-gradient(180deg,rgba(10,11,13,.14) 0%,rgba(10,11,13,.24) 26%,
 rgba(10,11,13,.46) 52%,rgba(10,11,13,.62) 78%,rgba(10,11,13,.68) 100%)}
/* 검은 기둥이 제목 칸 위로 210px 올라와 부드럽게 열리는데, 그게 제목 칸보다
   나중에 그려져서 수상 칩까지 함께 덮고 있었다. 제목 칸을 한 켜 위로 올린다. */
.hero{position:relative;z-index:3;background:transparent}
.heroin{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:20px 22px 30px;
 min-height:390px;display:flex;flex-direction:column}
.heroin header{margin-bottom:auto}
h1{font-size:50px;font-weight:800;letter-spacing:-.05em;line-height:1.12;margin:0 0 10px;
 text-shadow:0 2px 24px rgba(0,0,0,.55)}
h1 .en{display:inline-block;margin-left:14px;font-size:23px;font-weight:500;font-style:italic;color:#A9B4BB;
 letter-spacing:-.01em;vertical-align:baseline}
.meta{color:#CDD5DA;font-size:15px;font-variant-numeric:tabular-nums;
 text-shadow:0 1px 4px rgba(0,0,0,.9),0 2px 18px rgba(0,0,0,.75)}
.aw{display:inline-block;margin:12px 8px 0 0;padding:4px 11px;border-radius:0;
 background:rgba(9,10,12,.88);border:1px solid #333A42;font-size:12.5px;font-weight:700;
 color:#F7DC91;box-shadow:0 2px 14px rgba(0,0,0,.5)}
.aw.nom{color:#AEB6BD}
.top{display:flex;gap:24px;margin-top:26px;align-items:flex-start}
.top>img{width:196px;border-radius:0;flex:none;background:#141719}
.topr{flex:1;min-width:0}
.topr h2{margin:20px 0 8px}
.topr details{margin-top:0}
.facts{color:#9AA2A9;font-size:14.5px}
.facts b{color:#E9EDF0;font-weight:700}
.rate{margin-top:16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rate .st{color:#6CABDD;font-size:19px;letter-spacing:2px}
.rate .n{font-weight:800;font-size:19px;font-variant-numeric:tabular-nums}
.rate .sub{color:#5F686F;font-size:12.5px}
h2{font-size:13px;font-weight:800;letter-spacing:.06em;color:#6CABDD;margin:38px 0 12px;
 padding-left:9px;border-left:3px solid #6CABDD}
details{border:1px solid #21262B;border-radius:0;background:#101316;margin-top:12px}
details>summary{cursor:pointer;list-style:none;padding:13px 16px;font-size:13.5px;font-weight:700;
 color:#C3CBD1}
details>summary::-webkit-details-marker{display:none}
details>summary:before{content:'▸ ';color:#6CABDD}
details[open]>summary:before{content:'▾ '}
details>summary:hover{color:#6CABDD}
.dbody{padding:2px 16px 16px}
.review-rating-body{padding:2px 16px 16px}
.review-rating-body>.review-text{margin-top:12px}
.wi{display:inline-block;margin:0 6px 6px 0;padding:4px 10px;border-radius:0;background:#1A1E22;
 border:1px solid #272D33;font-size:13px;color:#C3CBD1}
.wi.hard{border-color:#5A3A3A;color:#E6B3B3}
.wnote{display:block;margin-top:8px;color:#5F686F;font-size:12px}
.dbody a.wnote{color:#89BFE4;text-decoration:underline;text-underline-offset:3px}
.tg{display:inline-block;margin:0 6px 6px 0;padding:3px 9px;border-radius:0;background:#15181B;
 font-size:12.5px;color:#8B939A}
.seenrate{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:4px 0 14px;
 border-bottom:1px solid #1D2126;margin-bottom:6px}
.seenrate .st{color:#6CABDD;font-size:19px;letter-spacing:2px}
.seenrate .n{font-weight:800;font-size:19px;font-variant-numeric:tabular-nums}
.seenrate em{font-style:normal;color:#5F686F;font-size:12.5px}
.revempty{margin:14px 0 26px;color:#9BA1A6;font-size:14.5px}
.short{font-family:'Nanum Myeongjo',serif;font-weight:700;font-size:19px;line-height:1.8;
 color:#E9EDF0;padding-left:13px;border-left:2px solid #3C556B;margin:4px 0 2px}
.revtext{max-width:50em}
.revtext p{margin-top:13px;font-size:15.5px;line-height:1.95;color:#C9D1D6;word-break:keep-all}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:24px 17px}
.grid a{text-decoration:none;color:inherit;display:block}
/* 뽑히지 않은 칸. 게으른 그림은 숨겨진 동안 받지 않는다. */
.grid a.hid{display:none}
/* 높이를 폭의 1.5배로 잡는 옛 방식. aspect-ratio 는 칸이 찌그러지는 브라우저가 있다. */
.grid .ph{display:block;position:relative;border-radius:0;overflow:hidden;background:#141719;
 width:100%;height:0;padding-top:150%}
.grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .22s}
.grid a:hover img{transform:scale(1.05)}
.grid a:hover .t{color:#6CABDD}
.grid .t{display:block;margin-top:7px;font-weight:700;font-size:13px;line-height:1.38;
 transition:color .15s}
.grid .y{color:#5F686F;font-size:11px;font-variant-numeric:tabular-nums;margin-left:4px;font-weight:600}
.grid .why{display:block;margin-top:3px;color:#7E868D;font-size:11.5px;line-height:1.5;
 word-break:keep-all}
/* 갈래 행. 제목은 한 줄로 넓게, 편수는 오른쪽 끝에 작은 알약으로. */
.brh{margin:22px 0 4px;font-size:11px;font-weight:800;letter-spacing:.16em;color:#5F686F}
.brh:first-of-type{margin-top:6px}
details.br{border:0;border-radius:0;background:none;margin:0;border-top:1px solid #1B1F23}
details.br:last-child{border-bottom:1px solid #1B1F23}
.br>summary{display:flex;align-items:center;gap:12px;padding:14px 2px;cursor:pointer;list-style:none;color:inherit}
.br>summary::-webkit-details-marker{display:none}
.br>summary:before{display:none}
.br .brt{flex:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.03em;line-height:1.4;
 color:#EEF2F4;word-break:keep-all;transition:color .15s}
.br .brn{flex:none;font-size:12px;font-weight:800;color:#8FC6EE;font-variant-numeric:tabular-nums;
 padding:3px 9px;border-radius:0;background:rgba(108,171,221,.11);letter-spacing:-.01em}
.br .arw{flex:none;width:12px;text-align:center;color:#46505A;font-size:17px;line-height:1;
 transition:transform .18s,color .15s}
.br[open]>summary .arw{transform:rotate(90deg);color:#6CABDD}
.br>summary:hover .brt,.br[open]>summary .brt{color:#8FC6EE}
.brbody{padding:2px 2px 18px}
/* 지도 줄은 펼치지 않는다. 글씨를 누르면 그 지도로 간다. (규찬 결정, 2026-10-01) */
a.br{display:flex;align-items:center;gap:12px;padding:14px 2px;text-decoration:none;color:inherit;
 border-top:1px solid #1B1F23}
a.br:last-child{border-bottom:1px solid #1B1F23}
a.br:hover .brt,a.br:focus-visible .brt{color:#8FC6EE}
a.br:hover .arw,a.br:focus-visible .arw{color:#6CABDD}
/* 배우 갈래 안의 배우별 줄 */
.br .br{border-top:1px solid #171A1E}
.br .br:last-child{border-bottom:0}
.br .br>summary{padding:11px 2px 11px 12px}
.br .br .brt{font-size:14px;font-weight:600;color:#C9D1D6}
.br .br .brn{background:none;padding:0;color:#7E8A93;font-weight:700}
.br .brbody .brbody{padding:2px 2px 14px 12px}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:12px 10px}
.mini a{text-decoration:none;color:inherit}
.mini .ph{display:block;position:relative;border-radius:0;overflow:hidden;background:#141719;
 width:100%;height:0;padding-top:150%}
.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mini a:hover .mt{color:#6CABDD}
/* 제목이 한 줄이냐 두 줄이냐에 따라 칸 높이가 달라지면 아래 단추가 오르내린다.
   두 줄 자리를 늘 비워 둔다. 넘치면 말줄임. */
.mini .mt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
 overflow:hidden;margin-top:5px;font-size:11.5px;font-weight:600;line-height:1.35;
 height:calc(1.35em * 2);color:#C3CBD1;word-break:keep-all}
.mini.off{display:none}
.mnav{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.mnav button{min-width:26px;height:26px;padding:0 7px;border-radius:0;background:#15181B;
 border:1px solid #23282E;color:#8B939A;font-size:12px;font-weight:700;cursor:pointer}
.mnav button:hover{color:#6CABDD;border-color:#35495B}
.mnav button.on{background:#6CABDD;border-color:#6CABDD;color:#06232F}
.allk{display:block;margin-top:10px;font-size:11.5px;color:#5F686F}
.go{margin:14px 0 2px;padding:13px 17px;border-radius:0;background:#6CABDD;
 color:#04222F;font-weight:800;text-decoration:none;font-size:15px;
 display:flex;align-items:center;gap:11px}
.go .gt{font-weight:600;font-size:13.5px;color:#0B3247;flex:1}
.go .garw{font-size:16px}
.go.mapgo{display:inline-flex;max-width:100%;min-height:36px;margin:11px 0 0;padding:7px 11px;
 background:rgba(9,19,25,.46);border:1px solid rgba(108,171,221,.72);
 color:#A9DAF8;font-size:13px;line-height:1.3;white-space:nowrap}
.go.mapgo:hover,.go.mapgo:focus-visible{background:rgba(108,171,221,.17);
 border-color:#B8E1FA;color:#E0F4FF}
.go.mapgo .garw{color:#6CABDD;font-size:15px;line-height:1}
.go.go2{margin-top:8px;background:none;border:1px solid #2A6F92;color:#6CABDD}
/* 갈래 안에서 다시 나누는 단추. 40편이 넘는 갈래에만 붙는다. */
.mfilt{display:flex;flex-wrap:nowrap;gap:6px;margin:0 0 12px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.mfilt::-webkit-scrollbar{display:none}
.mfilt button{flex:0 0 auto;white-space:nowrap}
.mfilt button{background:none;border:1px solid #23282D;color:#9AA6AE;border-radius:0;
  padding:6px 11px;font:inherit;font-size:12.5px;cursor:pointer;transition:border-color .15s,color .15s}
.mfilt button:hover{border-color:#2A6F92;color:#6CABDD}
.mfilt button.on{border-color:#6CABDD;color:#06232F;background:#6CABDD}
.mfilt button i{font-style:normal;opacity:.7;margin-left:4px;font-size:11.5px}
.mfilt button.on i{opacity:.85}
/* ===== 움직임 =====
   읽는 화면이므로 장식은 두지 않는다. 구조가 드러나는 순간에만 쓴다.
   1) 갈래를 펼치면 줄이 차례로 들어와 '여기서 이어진다'를 보이게 한다.
   2) 주의사항은 펼친 뒤 하나씩 앉아 수가 눈에 들어오게 한다.
   3) 별점은 들어올 때 한 번 차오른다. */
@keyframes nmRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes nmChip{from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:none}}
@keyframes nmFill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
details[open] > .dbody{animation:nmRise .32s ease-out both}
details[open] > .dbody .wi{animation:nmChip .26s ease-out both}
details[open] > .dbody .wi:nth-child(2){animation-delay:.04s}
details[open] > .dbody .wi:nth-child(3){animation-delay:.08s}
details[open] > .dbody .wi:nth-child(4){animation-delay:.12s}
details[open] > .dbody .wi:nth-child(5){animation-delay:.16s}
details[open] > .dbody .wi:nth-child(6){animation-delay:.2s}
details[open] > .dbody .wi:nth-child(n+7){animation-delay:.24s}
details.br[open] > .brbody{animation:nmRise .3s ease-out both}
details.br[open] > .brbody .mini{animation:nmRise .3s ease-out both}
details.br[open] > .brbody .mini:nth-child(2){animation-delay:.05s}
details.br[open] > .brbody .mini:nth-child(3){animation-delay:.1s}
details.br[open] > .brbody .mini:nth-child(4){animation-delay:.15s}
details.br[open] > .brbody .mini:nth-child(n+5){animation-delay:.2s}
.seenrate .st{animation:nmFill .7s ease-out both .15s}
@media (prefers-reduced-motion:reduce){
  details[open] > .dbody,details[open] > .dbody .wi,
  details.br[open] > .brbody,details.br[open] > .brbody .mini,
  .seenrate .st{animation:none}
}
.go.go2 .gt{color:#9BA1A6}
.topr>summary,.topr .dbody{font-size:13px}
footer{margin-top:46px;padding-top:18px;border-top:1px solid #191C20;color:#5F686F;font-size:13px}
footer a{color:#8B939A}
@media(max-width:980px){.cols{grid-template-columns:1fr;gap:8px}.side{position:static}}
@media(max-width:980px){.heroin{min-height:300px}}
/* 좁은 화면에서는 좌우 여백이 없어서 사진이 제목 칸에서만 보인다.
   그런데 배경은 화면 전체를 덮는 크기라, 가로로 긴 사진이 세로 화면에
   맞춰 크게 확대되고 정작 가운데 한 조각만 보였다.
   사진 칸을 제목 칸 높이로 줄여 사진 대부분이 그 안에 들어오게 한다. */
@media(max-width:980px){
 #nmroot{position:relative}
 .bg{position:absolute;top:0;left:0;right:0;bottom:auto;height:clamp(290px,80vw,420px)}
 .bg img{object-position:center 34%}
 .bg:after{background:linear-gradient(180deg,rgba(10,11,13,.10) 0%,
  rgba(10,11,13,.22) 46%,rgba(10,11,13,.40) 78%,rgba(10,11,13,.62) 100%)}
 /* 기둥이 사진을 너무 일찍 덮지 않게 여는 구간을 줄인다 */
 .wrap:before{top:-96px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 96px);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 96px)}
}
@media(max-width:640px){.heroin{min-height:240px}h1{font-size:29px}
 h1 .en{display:block;margin:6px 0 0;font-size:15px}
 header svg{height:32px}header .w{font-size:20px}
 .br .brt{font-size:14.5px}.br .br .brt{font-size:13.5px}
 .top img{width:112px}.short{font-size:17px}
 .grid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:18px 10px}
 .grid .t{font-size:12px}.grid .why{font-size:11px}}
#nmbar{position:fixed;top:0;left:0;height:2px;width:0;background:#6CABDD;z-index:99;
 opacity:0;transition:width .25s ease,opacity .2s}
#nmbar.on{opacity:1}
#nmload{position:fixed;inset:0;z-index:98;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:17px;background:rgba(8,8,9,.62);
 color:#C9D0D4;font-size:13px;font-weight:700;letter-spacing:.02em;
 opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease}
#nmload.on{opacity:1;visibility:visible}
#nmload .nmloadreel{width:64px;height:64px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.55));
 animation:nmLoadingReel 1.4s linear infinite}
@keyframes nmLoadingReel{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#nmload .nmloadreel{animation:none}}
#nmroot{animation:nmin .22s ease}
@keyframes nmin{from{opacity:.35}to{opacity:1}}

/* ---------- 긴 글과 갈래 목록은 각자 제 안에서 구른다 ---------- */
.dbody:has(.revtext),.dbody:has(.short){max-height:min(68vh,740px);overflow-y:auto;
 overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2E353B transparent}
.side{max-height:calc(100vh - 40px);overflow-y:auto;padding-right:7px;
 overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2E353B transparent}
.dbody:has(.revtext)::-webkit-scrollbar,.dbody:has(.short)::-webkit-scrollbar,
.side::-webkit-scrollbar{width:9px}
.dbody:has(.revtext)::-webkit-scrollbar-track,.dbody:has(.short)::-webkit-scrollbar-track,
.side::-webkit-scrollbar-track{background:transparent}
.dbody:has(.revtext)::-webkit-scrollbar-thumb,.dbody:has(.short)::-webkit-scrollbar-thumb,
.side::-webkit-scrollbar-thumb{background:#2E353B;border-radius:5px;
 border:2px solid transparent;background-clip:content-box}
.dbody:has(.revtext)::-webkit-scrollbar-thumb:hover,
.dbody:has(.short)::-webkit-scrollbar-thumb:hover,
.side::-webkit-scrollbar-thumb:hover{background:#41525E;background-clip:content-box}
/* 한 단으로 접히는 폭(폰·태블릿)에서는 단 전체가 아니라 글과 갈래 목록이 각자 상자 안에서 구른다.
   페이지가 끝없이 길어지지 않게. 상자 끝에 닿으면 페이지 스크롤로 자연스럽게 넘어간다(contain을 풂).
   아래쪽을 살짝 흐려 더 내려갈 게 있다는 걸 보인다. */
@media(max-width:980px){
 .side{max-height:none;overflow:visible;padding-right:0}
 .dbody:has(.revtext),.dbody:has(.short){max-height:62vh;overflow-y:auto;overscroll-behavior:auto;padding-bottom:44px;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 44px),rgba(0,0,0,.15));mask-image:linear-gradient(#000 calc(100% - 44px),rgba(0,0,0,.15))}
 .brs{max-height:62vh;overflow-y:auto;overscroll-behavior:auto;padding:0 12px 40px;
  border:1px solid #21262B;background:#0D1013;scrollbar-width:thin;scrollbar-color:#2E353B transparent;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 44px),rgba(0,0,0,.15));mask-image:linear-gradient(#000 calc(100% - 44px),rgba(0,0,0,.15))}
 .brs>details.br:first-child,.brs>:first-child{border-top:0}
 .brs::-webkit-scrollbar{width:4px}
 .brs::-webkit-scrollbar-thumb{background:#2E353B;border-radius:2px}
 .brs>details.br:last-child{border-bottom:0}}

/* ---------- 감독 지면 ---------- */
/* 앱의 감독 지면과 같은 모양이다. 색 이름을 앱에서 그대로 옮겨 왔다. */
:root{--line:#2B2D31;--sky:#6CABDD;--sky-2:#8FDBFF;--sky-dim:#2A6F92;
 --tx:#F3F5F6;--mut:#9BA1A6;--mut2:#6B7176;
 --disp:'Bebas Neue','Pretendard Variable',Pretendard,sans-serif}
/* .dhero 는 .hero 의 z-index:3 을 물려받고, 사진은 그 밖으로 210px 넘쳐나온다.
   본문이 3보다 낮으면 넘쳐나온 사진과 그라데이션이 글씨를 덮는다. */
.dwrap{max-width:1180px;margin:0 auto;padding:0 22px 70px;position:relative;z-index:4}
/* 감독 지면은 영화 낱장과 다르다. 얼굴이 기둥에 가려 안 보이기 때문에
   사진을 아래까지 내리지 않고 제목 칸 안에서 끝낸다. */
/* 사진이 제목 칸보다 조금 더 내려와 한줄평에 걸친다. 그 중간쯤에서 검정이 된다. */
.dhero{overflow:visible}
.bg.dbg{position:absolute;height:calc(100% + 210px)}
/* 어두워지는 지점을 제목 칸 바닥(= 아래에서 210px)에 픽셀로 못박는다.
   퍼센트로 두면 제목 칸 높이가 clamp 로 변해 한줄평이 걸리는 자리가 매번 달라진다.
   한줄평 두 번째 줄부터는 완전한 검정 위에 놓인다. */
.bg.dbg:after{content:'';position:absolute;inset:0;background:
 linear-gradient(180deg,rgba(10,11,13,.16) 0%,rgba(10,11,13,.26) 40%,
 rgba(10,11,13,.40) calc(100% - 210px),rgba(10,11,13,.74) calc(100% - 150px),
 #0A0B0D calc(100% - 95px),#0A0B0D 100%)}
.dwrap header{padding:20px 0 20px}
/* 감독 지면의 머리는 영화 낱장과 같은 뼈대(.hero/.bg/.heroin)를 쓴다.
   네모 테두리를 두르지 않는다 — 사진이 화면 폭 끝까지 가고 이름 밑에서 검게 잠긴다. */
.dp{position:relative;background:transparent;border:0;border-radius:0}
.dp.nolead{padding-top:132px}
.dheroin{min-height:clamp(320px,44vw,540px);padding-bottom:26px}
/* 사람 얼굴은 위쪽에 있다. 영화 낱장과 같은 28%로 자르면 머리가 날아간다. */
.bg.dbg img{object-position:center 12%;opacity:.46}
/* 이름은 어떤 폭에서도 한 줄이다. Bebas는 글자 한 칸이 대략 높이의 0.44배라
   '쓸 수 있는 폭 ÷ (글자 수 × 0.44)'가 두 줄이 안 되는 가장 큰 크기다.
   글자 수는 만들 때 --dn 으로 박아 넣는다. */
.den{display:block;font-family:var(--disp);line-height:.82;white-space:nowrap;
 font-size:max(26px,min(142px,calc(min(100vw - 46px,1134px) / (var(--dn,12) * 0.44))));
 letter-spacing:.005em;color:#F6FAFB;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.dko{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:14px}
.dko b{font-size:19px;font-weight:800;letter-spacing:-.03em;
 text-shadow:0 1px 12px rgba(0,0,0,.6)}
.dko span{font-size:12.5px;color:#9BA1A6;font-weight:600;font-variant-numeric:tabular-nums;
 text-shadow:0 1px 12px rgba(0,0,0,.6)}
.dcredit{padding:10px 0 0;font-size:10.5px;color:#7E888F}
.dcredit a{color:inherit;text-decoration:none;border-bottom:1px solid #3A4248}
.dcredit a:hover{color:var(--sky);border-color:var(--sky)}
.dpull{padding:32px 0 30px;border-bottom:1px solid #22262A}
.dpull p{font-family:'Nanum Myeongjo',Pretendard,serif;
 font-size:clamp(19px,2.6vw,30px);line-height:1.6;letter-spacing:-.02em;
 color:#E9F0F3;font-weight:700;max-width:min(100%,900px);word-break:keep-all}
.dpull cite{display:block;margin-top:14px;font-size:11.5px;font-style:normal;
 color:var(--mut2);font-weight:600}
.dpull cite a{color:inherit;text-decoration:none;border-bottom:1px solid #2A3035}
.dpull cite a:hover{color:var(--sky);border-color:var(--sky)}
/* 본문 두 단 — 영화 낱장과 같은 비율. 오른쪽은 붙어서 따라온다. */
.dflow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;
 align-items:start;padding:30px 0 34px}
.dflow:empty{display:none}
.dleft:empty,.dright:empty{display:none}
.dright{position:sticky;top:20px}
.dflow+.dfilmlab{border-top:1px solid #22262A;padding-top:22px}
.dlab{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--mut);margin-bottom:14px}
.dlab::before{content:'';display:block;width:26px;height:2px;background:var(--sky);margin-bottom:10px}
.dlab.dfilmlab{font-family:var(--disp);font-size:34px;font-weight:400;letter-spacing:.02em;
 color:#E7EDF0;margin:20px 0 16px}
.dlab.dfilmlab::before{display:none}
.dfilmcount{font-family:var(--disp);font-size:34px;color:#3A4247;margin-left:10px}
.dmore{margin-top:16px}
.dmore p{font-size:12.5px;line-height:1.75;color:#98A1A6;padding-left:11px;
 border-left:2px solid var(--sky-dim);margin-bottom:12px}
.dmore cite{display:block;margin-top:5px;font-size:10.5px;font-style:normal;
 color:#5C666C;font-weight:600}
.dmore cite a,.dpair cite a{color:inherit;text-decoration:none;border-bottom:1px solid #333A3F}
.dmore cite a:hover,.dpair cite a:hover{color:var(--sky);border-color:var(--sky)}
.dwith,.dfacts{list-style:none}
.dwith li{padding:11px 0;border-bottom:1px solid #1E2124}
.dwith li:last-child{border-bottom:none}
.wtop{display:flex;align-items:baseline;gap:10px}
.dwith b{font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.dwith .wtop span{font-size:11.5px;color:var(--mut2);font-weight:600}
.dfacts li{font-size:12.5px;color:var(--mut2);line-height:2}
.dfacts b{color:var(--tx);font-weight:700;font-variant-numeric:tabular-nums}
.dfacts b span{color:var(--mut2);font-weight:600;font-size:11px;margin-left:5px}
.dpair{margin-top:2px}
.dpair b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--sky)}
.dpair b a{color:inherit;text-decoration:none;border-bottom:1px solid var(--sky-dim)}
.dpair b a:hover{border-color:var(--sky)}
.dpair p{margin-top:7px;font-size:12.5px;line-height:1.75;color:#98A1A6;
 padding-left:11px;border-left:2px solid var(--sky-dim)}
.dpair cite{display:block;margin-top:6px;padding-left:11px;font-size:10.5px;font-style:normal;
 color:#5C666C;font-weight:600}
.dfilms{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
 gap:0 18px;padding:0 0 34px;border-top:1px solid #1C2024}
.dfilm{display:block;text-align:left;min-width:0;text-decoration:none;color:inherit;
 padding:16px 0 16px}
.dfp{position:relative;display:block;width:100%;height:0;padding-top:150%;border-radius:0;
 background:#14181B;border:1px solid var(--line);overflow:hidden;
 transition:transform .16s,border-color .16s}
.dfp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dfilm:hover .dfp{transform:translateY(-4px);border-color:var(--sky-dim)}
.dfalt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 padding:9px;font-size:11px;font-weight:700;color:var(--mut2);text-align:center;line-height:1.4}
.dft{display:block;margin-top:8px;font-size:12px;font-weight:700;line-height:1.35;
 letter-spacing:-.02em;word-break:keep-all}
.dfilm:hover .dft{color:var(--sky)}
.dfy{display:block;margin-top:2px;font-size:10.5px;color:var(--mut2)}
.dgobox{padding:0 0 34px}
.dgobox .go{margin:0}
.dwrap footer{margin-top:30px}
/* 영화 낱장에서 감독 지면으로 나가는 두 자리 */
.meta .dgo{color:#DCE7EF;text-decoration:none;border-bottom:1px solid rgba(220,231,239,.35)}
.meta .dgo:hover{color:#6CABDD;border-color:#6CABDD}
.topage{display:inline-block;margin:0 0 12px;font-size:12px;font-weight:700;color:#6CABDD;
 text-decoration:none;border-bottom:1px solid #2A6F92}
.topage:hover{border-color:#6CABDD}
@media(max-width:980px){
 .dflow{grid-template-columns:1fr;gap:26px}
 .dright{position:static}}
@media(max-width:760px){
 .dwrap{padding:0 14px 60px}
 .dflow{padding:22px 0 24px}
 .dlab.dfilmlab{font-size:27px}
 .dfilms{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
 .dheroin{min-height:clamp(240px,56vw,380px)}}


.pzoom{cursor:zoom-in}
#pbig{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.86);padding:24px}
#pbig.on{display:flex}
#pbig img{max-width:min(92vw,620px);max-height:86vh;border-radius:0;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#pbig .pcap{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:13px;color:#c8d0d8}


/* 로고와 차림표는 앱 머리와 같은 자리·같은 크기다(앱 .head/.nav 값을 그대로 옮김).
   PC: 로고 높이 44px, 머리 62px, 차림표 칸 높이 30px, 좌우 17px, 글씨 14.5/9px.
   휴대폰(520px 이하): 로고 38px, 머리 66px, 칸 38px, 좌우 12px, 글씨 13.5/8.5px.
   바탕은 그대로 비우고 경계만 얇은 점선으로 긋는다. */
.ftop{position:relative;z-index:6}
.ftop header{height:61px;margin-bottom:1px;padding:0 16px;display:flex;align-items:center}
.ftop .mark{padding:0 2px;flex:none}
.fbar{display:flex;align-items:center;gap:14px;padding:5px 12px 6px;position:relative}
.fnav{display:flex;align-items:stretch;overflow-x:auto;max-width:min(880px,68%);
  scrollbar-width:none;background:none}
.fnav::-webkit-scrollbar{display:none}
.fnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:30px;padding:0 16px;color:#E2E8EC;text-decoration:none;flex:none;
  white-space:nowrap;border:1px dotted rgba(255,255,255,.3);margin-left:-1px;
  font-size:14.5px;font-weight:800;letter-spacing:-.03em;line-height:1.05;
  text-shadow:0 1px 4px rgba(0,0,0,.9)}
.fnav a:first-child{margin-left:0}
.fnav a::before{content:attr(data-n);font-family:'DM Mono',ui-monospace,Menlo,monospace;
  font-size:9px;font-weight:400;letter-spacing:.16em;color:#AEB7BE;line-height:1}
.fnav a:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.fnav a[aria-current="true"]{color:#9FD2F4;border-color:rgba(108,171,221,.75)}
/* 차림표가 칸보다 길어지는 폭에서는 오른쪽 끝을 흐려 밀어 볼 수 있음을 알린다. */
@media(max-width:1180px){
  .fnav{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 90%,rgba(0,0,0,.15) 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 90%,rgba(0,0,0,.15) 100%)}}
/* 검색칸도 바탕 없이 테두리만. 차림표 칸과 같은 높이로 나란히 선다. */
.fq{position:relative;margin-left:auto;width:min(300px,30%);flex:none}
/* PC: 빠른 찾기의 오른쪽 끝을 본문 기둥의 오른쪽 끝(갈래 목록 스크롤바 자리)에 맞춘다.
   본문은 가운데 1180px에 좌우 22px 안쪽. 차림표 줄은 좌우 12px 안쪽이라 50%-568px 만큼 비운다. */
@media(min-width:981px){.fq{margin-right:max(0px,calc(50% - 568px))}}
.fqfield{display:flex;align-items:center;height:30px;background:none;
  border:1px dotted rgba(255,255,255,.3)}
.fqfield:focus-within{border-color:rgba(108,171,221,.75)}
.fqfield .fqic{padding:0 2px 0 10px;color:#C6CED4;font-size:15px;line-height:1}
.fq input{flex:1;min-width:0;border:none;outline:none;background:none;padding:0 9px;
  font:inherit;font-size:14px;color:#F1F4F6;letter-spacing:-.02em;
  text-shadow:0 1px 4px rgba(0,0,0,.9)}
.fq input::placeholder{color:#AEB7BE}
.fqmic{background:none;border:none;color:#C6CED4;cursor:pointer;padding:0 9px 0 4px;
  display:flex;align-items:center}
.fqmic svg{width:15px;height:15px}
.fqmic:hover{color:#9FD2F4}
.fqsug{position:absolute;right:0;left:0;top:calc(100% + 4px);background:none;
  border:1px dotted rgba(255,255,255,.3);border-top:none;
  overflow-y:auto;max-height:min(58vh,340px);display:none;overscroll-behavior:contain;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:8;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
.fqsug::-webkit-scrollbar{width:6px}
.fqsug::-webkit-scrollbar-track{background:transparent}
.fqsug::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26);border-radius:3px}
.fqsug.on{display:block}
.fqsug a{display:flex;align-items:center;gap:8px;padding:9px 12px;color:#F1F4F6;
  text-decoration:none;font-size:13.5px;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.fqsug a:hover,.fqsug a.hot{background:rgba(108,171,221,.16)}
.fqsug a i{font-style:normal;color:#C0C8CE;font-size:11.5px;margin-left:auto;
  text-shadow:0 1px 4px rgba(0,0,0,.9)}
/* 제목 칸: 머리(103px)가 기둥 밖으로 나갔으니 그만큼 줄이고, 제목은 전처럼 바닥에 붙인다. */
.heroin{min-height:287px;padding-top:20px}
.heroin>:first-child{margin-top:auto}
.dheroin{min-height:clamp(217px,calc(44vw - 103px),437px)}
@media(max-width:980px){.heroin{min-height:197px}}
/* PC에서는 제목 줄을 조금 키우고 조금 올린다. 늘리는 비율은 제목 : 영어 제목·정보 = 3 : 2. */
@media(min-width:981px){
  .heroin:not(.dheroin){min-height:263px}
  .heroin h1{font-size:59px}
  .heroin h1 .en{font-size:25.8px;margin-left:16px}
  .heroin .meta{font-size:16.8px}
}
@media(max-width:760px){
  /* 좁은 화면에서는 차림표를 틀 안에 가두고 밀어 본다. 제목은 차림표 밑 고정 간격. */
  .fbar{gap:10px}
  .fnav{max-width:none;flex:1;min-width:0}
  .fq{width:42%;min-width:132px}
  .fq input{font-size:13px;padding:0 7px}
  .fqmic{padding:0 7px 0 2px}
  .heroin{min-height:205px;padding-top:30px}
  .heroin>:first-child{margin-top:0}
  .dheroin{min-height:clamp(125px,calc(56vw - 115px),265px)}
}
@media(max-width:520px){
  .ftop header{height:65px;padding:0 12px}
  .ftop .mark .nmk{height:38px}
  .ftop .mark .mkw{font-size:31px}
  .fbar{padding:5px 6px 6px}
  .fnav a{height:38px;padding:0 11px;font-size:13.5px}
  .fnav a::before{font-size:8.5px;letter-spacing:.12em}
  .fqfield{height:38px}
}

button:not(:disabled),a[href],summary,[role="button"]{cursor:pointer}
button:disabled{cursor:wait}

/* Synopsis is independent of ratings and reviews. */
.film-synopsis{margin-top:24px}
.synopsis-body{padding:2px 16px 16px;max-height:min(60vh,620px);overflow-y:auto;overscroll-behavior:contain;overflow-wrap:anywhere;scrollbar-gutter:stable}
.synopsis-body p{font-size:15px;line-height:1.9;color:#C9D1D6;margin:10px 0;word-break:keep-all}
.synopsis-source{display:inline-block;margin-top:8px;font-size:12px;color:#89BFE4;text-decoration:underline;text-underline-offset:3px}