*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0d0709; --panel:#1a1013; --panel2:#221419; --line:#3a2229;
  --text:#f6ecef; --muted:#a98d95; --accent:#ff5470; --accent2:#ffa14a;
  --radius:4px; --ctl-r:6px; --card-r:4px; --gap:16px; --pad:16px; --maxw:1140px;
  /* ── 타이포 스케일 ── 값을 여기서만 정한다.
     요소마다 clamp 를 제각각 주면 화면마다 크기 관계가 뒤집혀 리듬이 깨진다. */
  --t-cap:12px;                    /* 라벨·뱃지·상단 메뉴 */
  --t-sm:13px;                     /* 카드 보조 정보·각주 */
  --t-body:15px;                   /* 본문·카드 제목 */
  --t-mid:16px;                      /* 리드·강조 본문 */
  --t-h2:clamp(17px,2.1vw,22px);     /* 섹션 제목 */
  --t-h1:clamp(25px,3.6vw,40px);     /* 히어로 제목 */
  --t-detail:clamp(24px,3.5vw,38px); /* 상세 제목 */
  --lh-body:1.72;                    /* 본문 줄간 */
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.65 "Pretendard","Malgun Gothic","Apple SD Gothic Neo",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.03em;line-height:1.15}
.wrap-2d78a4{width:min(var(--maxw),100%);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
/* 페이지 폭 변형 */
body.width-narrow-2d7813{--maxw:1000px}
body.width-wide-2d7862{--maxw:1340px}
/* 통계줄 — 히어로를 쓰지 않는 골격에서 첫 화면 역할 */
.statbar-2d78f3{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 55%,transparent)}
.statbar-in-2d78db{padding-top:clamp(22px,3.4vw,36px);padding-bottom:clamp(18px,3vw,30px)}
.statbar-in-2d78db h1{font-size:clamp(24px,4vw,38px);font-weight:800;letter-spacing:-.03em;margin:2px 0 4px}
.stats-line-2d786e{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.stats-line-2d786e b{color:var(--text)}
.muted-2d7878{color:var(--muted)}
.tiny-2d78ad{font-size:12px}
.mono-2d78cc{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* nav */
.nav-2d785e{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
.nav-in-2d78a4{display:flex;align-items:center;gap:14px;height:62px}
.brand-2d78f3{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;min-width:0}
.brand-2d78f3 i{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.brand-2d78f3 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-links-2d782c{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.nav-links-2d782c a{padding:7px 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)}
.nav-links-2d782c a:hover{color:var(--text);background:var(--panel2)}
/* 상단 장르 버튼 — 알약(pill) 형태로 또렷하게. 스크롤해도 한 줄로 유지된다 */
.nav-genres-2d782a{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 14px}
.nav-genre-2d786b{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--text);background:color-mix(in srgb,var(--panel) 88%,transparent);
  border:1px solid var(--line);text-decoration:none;line-height:1;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.nav-genre-2d786b:hover{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;transform:translateY(-1px)}
.nav-genres-2d782a::before{content:"장르";display:inline-flex;align-items:center;flex:none;min-height:var(--ctl-h);margin-right:var(--sp-1);font-size:var(--t-cap);font-weight:800;letter-spacing:.08em;color:var(--muted)}
/* 장르·검색 위치 변형 — 로고 오른쪽(brand) / 아래 줄(below) / 메뉴 끝(menu) */
.nav-2d785e[data-gpos="brand"] .nav-in-2d78a4{flex-wrap:wrap;gap:10px}
.nav-2d785e[data-gpos="brand"] .nav-genres-2d782a{display:flex;flex-wrap:wrap;gap:8px;padding:0;order:2}
.nav-2d785e[data-gpos="brand"] .nav-links-2d782c{order:3}
.nav-below-2d7871{padding-top:10px;padding-bottom:14px}
.nav-below-2d7871:empty{display:none}
/* 검색 폼 — 위치가 사이트마다 다르다 */
.nav-search-2d78d0{display:flex;gap:6px;align-items:center;order:2}
.nav-search-2d78d0 input[type=search]{width:170px;padding:9px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-size:13px}
.nav-search-2d78d0 button{padding:9px 14px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:13px}
.nav-2d785e[data-spos="below"] .nav-search-2d78d0 input[type=search]{width:min(420px,70vw)}
.page-search-2d7866{display:flex;gap:8px;margin:18px 0 10px}
.page-search-2d7866 input[type=search]{flex:1;max-width:520px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-size:15px}
.foot-links-2d7840{display:flex;flex-wrap:wrap;gap:16px;padding:20px 0 0;font-size:14px;font-weight:600}
.foot-links-2d7840 a{color:var(--muted)}
.foot-links-2d7840 a:hover{color:var(--text)}

/* ── 섹션 표현 변형(마크업 자체가 다르다) ── 순위 행 · 가로 띠 · 피처+목록 */
.rank-rows-2d78f0{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.rank-rows-2d78f0 li a{display:flex;align-items:center;gap:14px;padding:8px 10px;border:1px solid var(--line);
  border-radius:14px;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.rank-rows-2d78f0 li a:hover{border-color:var(--accent)}
.rank-no-2d78bc{min-width:26px;font-weight:800;color:var(--accent);font-size:15px;text-align:center}
.rank-art-2d78aa img{border-radius:8px;display:block;object-fit:cover}
.rank-txt-2d78b4{display:flex;flex-direction:column;gap:2px;min-width:0}
.rank-txt-2d78b4 b{font-size:16px}
.strip-2d7839{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.strip-item-2d784e{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-width:0}
.strip-item-2d784e img{width:100%;height:auto;border-radius:12px;display:block}
.strip-item-2d784e b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feature-split-2d787b{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:var(--sp-5);align-items:start}
.feature-main-2d78e1{display:flex;flex-direction:column;gap:10px}
.feature-main-2d78e1 img{width:100%;max-width:240px;height:auto;border-radius:16px;display:block}
.feature-main-2d78e1 b{font-size:20px}
.feature-list-2d78fb{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.feature-list-2d78fb a{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid var(--line);
  border-radius:12px;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.feature-list-2d78fb a:hover{border-color:var(--accent)}

/* ── 모바일 ── 좁은 화면에서 메뉴·검색·카드가 넘치지 않게 */
body.nav-float-2d7848 .nav-2d785e{background:transparent;border-bottom:0;position:sticky;padding-top:12px}
body.nav-float-2d7848 .nav-in-2d78a4{background:color-mix(in srgb,var(--panel) 86%,transparent);border:1px solid var(--line);
  border-radius:999px;height:56px;padding:0 10px 0 18px;box-shadow:0 16px 40px -28px rgba(0,0,0,.9)}

/* hero */
/* ── 히어로 ──
   목표: **첫 화면(약 800px) 안에 히어로가 끝나고 영화 카드가 보이게** 한다.
   예전에는 패딩 84px + 포스터 460px + 큰 제목이 겹쳐 히어로만 화면을 다 채웠다. */
.hero-2d78c4{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-in-2d7890{padding-top:clamp(28px,4.6vw,60px);padding-bottom:clamp(28px,4.6vw,60px)}
.hero-2d78c4 .eyebrow-2d78ca{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.hero-2d78c4 .eyebrow-2d78ca::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.hero-2d78c4 h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(100deg,var(--text),color-mix(in srgb,var(--accent) 55%,var(--text)));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-2d78c4 .sub-2d78b2{margin:8px 0 0;font-size:var(--t-mid);font-weight:700;color:var(--accent)}
.hero-2d78c4 .lead-2d786c{margin:8px 0 0;color:var(--text-2);font-size:var(--t-body);max-width:64ch;line-height:1.65}
.hero-2d78c4 .meta-2d78c5{margin-top:11px;display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.hero-2d78c4 .meta-2d78c5 b{color:var(--text)}
.hero-cta-2d7885{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.btn-2d7876{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:4px;
  font-weight:700;font-size:14px;border:1px solid var(--line);background:var(--panel);color:var(--text);
  transition:transform .14s ease,filter .14s ease,border-color .14s ease,box-shadow .14s ease}
.btn-2d7876.pri-2d78c4{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}
.btn-2d7876.ghost-2d781e{background:transparent;color:var(--text-2)}
.btn-2d7876:hover{filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 8px 20px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-2d7876:active{transform:translateY(0)}
/* 상세 페이지 광고 버튼 (관리자 화면에서 추가 — 새 탭으로 열린다) */
.ad-btns-2d7875{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ad-btns-2d7875 .btn-2d7876{font-size:14px;padding:12px 20px}
.ad-btns-2d7875 .ext-2d7833{font-size:12px;opacity:.85}

body.hero-split-2d789c .hero-grid-2d78f7{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3.4vw,40px);align-items:center}
body.hero-split-2d789c .hero-art-2d788c{aspect-ratio:2/3;max-height:330px;justify-self:end;width:100%;max-width:240px}
body.hero-center-2d7891 .hero-in-2d7890{text-align:center;display:flex;flex-direction:column;align-items:center}
body.hero-center-2d7891 .hero-2d78c4 .lead-2d786c{margin-left:auto;margin-right:auto}
body.hero-center-2d7891 .hero-cta-2d7885{justify-content:center}
body.hero-poster-2d7864 .hero-bg-2d78d8{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.7;filter:saturate(1.15)}
body.hero-poster-2d7864 .hero-in-2d7890{position:relative;padding-top:clamp(48px,8vw,96px);padding-bottom:clamp(48px,8vw,96px)}
/* 어둡게 덮는 그라데이션은 **히어로 안에** 있어야 한다.
   body::after 로 두면 body 가 static 이라 페이지 전체(initial containing block)를 덮어
   히어로 아래 모든 내용이 흐릿해진다. */
body.hero-poster-2d7864 .hero-2d78c4::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 3%,color-mix(in srgb,var(--bg) 52%,transparent) 48%,
  color-mix(in srgb,var(--bg) 22%,transparent))}
body.hero-poster-2d7864 .hero-in-2d7890>*{position:relative;z-index:1}
body.hero-stack-2d7828 .hero-grid-2d78f7{display:flex;flex-direction:column-reverse;gap:12px;align-items:center;text-align:center}
/* stack 은 포스터가 위에 오므로 **작게** 해야 첫 화면에 영화 카드까지 보인다 */
body.hero-stack-2d7828 .hero-art-2d788c{width:min(132px,32vw);aspect-ratio:2/3}
body.hero-stack-2d7828 .hero-2d78c4 .lead-2d786c{margin-left:auto;margin-right:auto}
body.hero-minimal-2d7802 .hero-grid-2d78f7{display:block}
/* 좌우 반전 — 포스터가 왼쪽, 글이 오른쪽(split 과 같은 재료를 다르게 배치) */
body.hero-mirror-2d7853 .hero-grid-2d78f7{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(18px,3.4vw,40px);align-items:center}
body.hero-mirror-2d7853 .hero-art-2d788c{order:-1;aspect-ratio:2/3;max-height:330px;width:100%;max-width:240px}
/* 가로 띠 — 글이 위, 포스터가 아래 **전체 폭**. 배너처럼 읽힌다 */
body.hero-band-2d7882 .hero-grid-2d78f7{display:grid;grid-template-columns:1fr;gap:14px}
/* ⚠ aspect-ratio 와 max-height 를 같이 쓰면 max-height 가 무시되어 띠가 화면을 다 먹는다.
   높이를 직접 정한다(clamp 로 화면 폭에 따라 조금씩). */
body.hero-band-2d7882 .hero-art-2d788c{width:100%;max-width:none;aspect-ratio:auto;height:clamp(130px,16vw,200px);justify-self:stretch}

/* 히어로 아트는 split / mirror / stack / band 에서만 노출 — 나머지는 텍스트 중심 */
.hero-art-2d788c{max-width:280px}
body.hero-center-2d7891 .hero-grid-2d78f7,body.hero-poster-2d7864 .hero-grid-2d78f7{display:block}
body.hero-center-2d7891 .hero-art-2d788c,body.hero-poster-2d7864 .hero-art-2d788c,body.hero-minimal-2d7802 .hero-art-2d788c{display:none}
.art-2d7851{border-radius:var(--radius);overflow:hidden;background:var(--panel2);border:1px solid var(--line);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.art-2d7851 img{width:100%;height:100%;object-fit:cover}

/* sections */
section.blk-2d780e{padding:clamp(30px,5vw,56px) 0}
.sec-head-2d78b5{display:flex;align-items:flex-end;gap:14px;margin-bottom:var(--gap);flex-wrap:wrap}
/* ── 섹션 헤더 ── 제목 왼쪽에 accent 바를 두고 오른쪽에 보조 정보를 붙인다.
   예전에는 <h2> 하나만 있어서 섹션 경계가 밋밋했다. */
.sec-head-2d78b5{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sec-head-2d78b5 h2{display:flex;align-items:center;gap:10px;font-size:var(--t-h2);font-weight:800;letter-spacing:-.03em}
.sec-head-2d78b5 h2::before{content:"";width:4px;align-self:stretch;min-height:1em;border-radius:3px;
  background:linear-gradient(to bottom,var(--accent),var(--accent2))}
.sec-head-2d78b5 .sub-2d78b2{color:var(--muted);font-size:13px}
.sec-head-2d78b5 .more-2d78cf{margin-left:auto;color:var(--accent);font-size:14px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;transition:gap .15s ease}
.sec-head-2d78b5 .more-2d78cf:hover{gap:9px}

/* cards */
.grid-2d7894{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
body.cards-compact-2d78be .grid-2d7894{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px}
.card-2d782e{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--card-r);overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s ease,box-shadow .18s ease}
.card-2d782e:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 24px 48px -28px color-mix(in srgb,var(--accent) 85%,transparent)}
.card-2d782e .ph-2d7818{position:relative;aspect-ratio:2/3;background:var(--panel2);overflow:hidden}
.card-2d782e .ph-2d7818 img{width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.card-2d782e:hover .ph-2d7818 img{transform:scale(1.045)}
.card-2d782e .t-2d7882{transition:color .16s ease}
.card-2d782e:hover .t-2d7882{color:color-mix(in srgb,var(--accent) 80%,var(--text))}
.card-2d782e .bd-2d78d8{padding:12px 13px 14px}
.card-2d782e .t-2d7882{font-weight:700;font-size:var(--t-body);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-2d782e .y-2d78cc{color:var(--muted);font-size:var(--t-sm);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card-2d782e .y-2d78cc .yy-2d78dc{font-variant-numeric:tabular-nums;opacity:.9}
/* 카드 장르 칩 — 제목·연도만 있던 카드에 정보를 더한다 */
.card-2d782e .y-2d78cc .gc-2d7835{border:1px solid var(--line);border-radius:999px;padding:1px 7px;font-size:12px;line-height:1.5;
  background:color-mix(in srgb,var(--panel2) 70%,transparent);white-space:nowrap}
.card-2d782e:hover .y-2d78cc .gc-2d7835{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.score-2d787f{position:absolute;right:8px;top:8px;background:color-mix(in srgb,var(--bg) 82%,transparent);
  border:1px solid var(--line);border-radius:999px;padding:3px 8px;font-size:12px;font-weight:800;color:var(--accent)}

body.cards-wide-2d7825 .grid-2d7894{grid-template-columns:1fr}
body.cards-wide-2d7825 .card-2d782e{display:flex;align-items:stretch;gap:0}
body.cards-wide-2d7825 .card-2d782e .ph-2d7818{width:104px;flex:none;aspect-ratio:2/3}
body.cards-wide-2d7825 .card-2d782e .bd-2d78d8{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:14px 16px}
body.cards-wide-2d7825 .card-2d782e .ov-2d785f{color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

body.cards-rank-2d786c .grid-2d7894{grid-template-columns:1fr;gap:8px}
body.cards-rank-2d786c .card-2d782e{display:flex;align-items:center;gap:14px;padding:10px 14px}
body.cards-rank-2d786c .card-2d782e .ph-2d7818{width:52px;flex:none;aspect-ratio:2/3;border-radius:6px;overflow:hidden}
body.cards-rank-2d786c .card-2d782e .bd-2d78d8{padding:0;flex:1;min-width:0}
body.cards-rank-2d786c .card-2d782e .no-2d7841{font-size:20px;font-weight:900;color:var(--accent);width:30px;flex:none;text-align:center}

/* 카드 형태별 요소 노출 제어 */
.card-2d782e .no-2d7841{display:none}
.card-2d782e .ov-2d785f{display:none}
body.cards-rank-2d786c .card-2d782e .no-2d7841{display:block}
body.cards-wide-2d7825 .card-2d782e .ov-2d785f{display:-webkit-box}

/* genres */
.chips-2d7806{display:flex;gap:8px;flex-wrap:wrap}
.chip-2d78a1{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  font-size:13px;font-weight:600;color:var(--muted)}
.chip-2d78a1:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}

/* detail */
.detail-hero-2d7895{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.detail-bg-2d784f{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.24}
.detail-hero-2d7895::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 4%,transparent 70%)}
.detail-in-2d78e1{position:relative;z-index:1;padding:clamp(26px,5vw,56px) 0;display:grid;
  grid-template-columns:minmax(0,214px) minmax(0,1fr);gap:clamp(20px,3.4vw,38px);align-items:start}
.detail-in-2d78e1 .art-2d7851{aspect-ratio:2/3}
.detail-in-2d78e1 h1{font-size:var(--t-detail);font-weight:800;letter-spacing:-.032em;line-height:1.22}
.detail-in-2d78e1 .tag-2d7864{color:var(--muted);font-style:italic;margin-top:6px;font-size:14px}
/* 줄거리 — 한 줄 길이를 묶어야 읽힌다(넓은 화면에서 끝까지 차면 눈이 줄을 놓친다) */
.detail-in-2d78e1 .prose-2d7874,.detail-in-2d78e1 .body-2d78a1,.detail-in-2d78e1 > div > p{max-width:66ch;line-height:1.85}
.detail-in-2d78e1 .facts-2d7872{margin-top:18px}
.facts-2d7872{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.fact-2d7819{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 12px;font-size:13px}
.fact-2d7819 b{color:var(--accent)}
/* footer 사이트 소개 — 검색엔진과 방문자 모두에게 목적을 설명하는 영역
   ⚠ 여백은 **한 리듬**으로: 요소마다 상하 패딩을 따로 주면(26/18, 14/4 …) 간격이 들쭉날쭉해진다.
      아래 블록 전체가 좌우는 .wrap-2d78a4 하나에만 맡기고, 위아래만 20px 단위로 쓴다. */
.foot-about-2d789c{max-width:78ch;padding:0 0 20px;border-bottom:1px solid var(--line);margin:0 0 20px}
.foot-about-2d789c .foot-h-2d786a{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--text);margin:0 0 8px}
.foot-about-2d789c .prose-2d7874{margin-top:0;font-size:14px;line-height:1.75}
.foot-about-2d789c .small-2d78bd{font-size:12px;margin-top:8px}
.prose-2d7874{color:var(--muted);margin-top:18px;max-width:70ch;white-space:pre-wrap}
.two-2d784e{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap)}
.kv-2d78c2{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.kv-2d78c2 dt{color:var(--muted)}
.kv-2d78c2 dd{margin:0;font-weight:600}
.people-2d782f{display:flex;gap:10px;flex-wrap:wrap}
.person-2d7831{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:10px 13px;min-width:120px}
.person-2d7831 b{display:block;font-size:14px}
.person-2d7831 span{color:var(--muted);font-size:12px}
.brd-2d78c7{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.brd-2d78c7 a:hover{color:var(--accent)}

/* footer */
footer.site-2d78d4{border-top:1px solid var(--line);margin-top:40px;padding:34px 0 46px;color:var(--muted);font-size:13px}
/* ⚠ text-align 을 명시한다 — 상위(히어로 center 변형 등)에서 상속되면
   좁은 화면에서 footer 정보가 가운데로 몰려 지저분해진다. */
.foot-in-2d7828{display:flex;gap:18px;flex-wrap:wrap;align-items:center;text-align:left}
.gen-2d78ea{opacity:.75;font-size:12px}
/* ── footer 레이아웃 변형 ── 사이트마다 다르다(print.footer-2d7865). 예전에는 넷 다 같은 구조였다 */
footer.site-2d78d4[data-layout="center"]{ text-align:center; }
footer.site-2d78d4[data-layout="center"] .foot-about-2d789c{ max-width:none; }
footer.site-2d78d4[data-layout="center"] .foot-in-2d7828{ flex-direction:column; align-items:center; gap:6px; text-align:center; }
footer.site-2d78d4[data-layout="center"] .foot-links-2d7840{ justify-content:center; }
footer.site-2d78d4[data-layout="center"] .foot-about-2d789c{ margin-left:auto; margin-right:auto; text-align:center; }
footer.site-2d78d4[data-layout="center"] .foot-about-2d789c .prose-2d7874,footer.site-2d78d4[data-layout="center"] .foot-about-2d789c .small-2d78bd{ margin-left:auto; margin-right:auto; text-align:center; }
footer.site-2d78d4[data-layout="cols"] .foot-cols-2d7806{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:start;
  padding-top:20px; margin-top:20px; border-top:1px solid var(--line);
}
footer.site-2d78d4[data-layout="cols"] .foot-cols-2d7806 .foot-in-2d7828{ flex-direction:column; align-items:flex-start; gap:4px; }
footer.site-2d78d4[data-layout="cols"] .foot-links-2d7840{ padding:0; }
footer.site-2d78d4[data-layout="compact"] .foot-links-2d7840{ padding:16px 0 0; }
footer.site-2d78d4[data-layout="compact"] .foot-in-2d7828{ padding-bottom:20px; border-bottom:1px solid var(--line); }
footer.site-2d78d4[data-layout="compact"] .foot-about-2d789c{ border-bottom:0; margin-bottom:0; padding:20px 0 0; }
.gen-2d78ea b{color:var(--accent)}
.sitemap-links-2d78a6{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}

/* ── 모던 폴리시 레이어 ──
   위의 구조 규칙은 건드리지 않고, 질감(배경 글로우·유리 느낌·그림자·포커스·등장 효과)만 덧입힌다.
   반응형 규칙보다 앞에 둬서 좁은 화면 규칙이 이길 수 있게 한다. */
:root{
  --text-2:color-mix(in srgb,var(--text) 78%,var(--muted));
  --glass:color-mix(in srgb,var(--panel) 72%,transparent);
  --ring:color-mix(in srgb,var(--accent) 55%,transparent);
  --shadow-sm:0 1px 2px rgba(0,0,0,.18),0 6px 16px -10px rgba(0,0,0,.45);
  --shadow-lg:0 2px 4px rgba(0,0,0,.2),0 28px 56px -28px rgba(0,0,0,.7);
  --ease:cubic-bezier(.2,.7,.3,1);
}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  background-image:
    radial-gradient(900px 420px at 12% -60px,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
    radial-gradient(760px 380px at 92% -40px,color-mix(in srgb,var(--accent2) 13%,transparent),transparent 70%);
  background-repeat:no-repeat;
  text-rendering:optimizeLegibility;
}
::selection{background:color-mix(in srgb,var(--accent) 38%,transparent);color:var(--text)}
a:focus-visible,button:focus-visible,input:focus-visible,.card-2d782e:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
img{background:var(--panel2)}

/* 상단 바 — 유리 질감 + 가는 하이라이트 선 */
.nav-2d785e{backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);
  background:color-mix(in srgb,var(--bg) 74%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--text) 5%,transparent),0 12px 28px -24px rgba(0,0,0,.8)}
.brand-2d78f3{font-size:17px}
.nav-links-2d782c a{transition:background .15s ease,color .15s ease}
.nav-search-2d78d0 input[type=search]{transition:border-color .15s ease,box-shadow .15s ease}
.nav-search-2d78d0 input[type=search]:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.nav-genre-2d786b{box-shadow:var(--shadow-sm)}

/* 히어로 — 은은한 빛과 포스터 입체감 */
.hero-2d78c4{background:
  radial-gradient(640px 280px at 85% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
.hero-2d78c4 .eyebrow-2d78ca{padding:5px 12px 5px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.hero-2d78c4 .eyebrow-2d78ca::before{width:14px}
.hero-2d78c4 .art-2d7851,.detail-in-2d78e1 .art-2d7851{border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent)}
.btn-2d7876{box-shadow:var(--shadow-sm)}
.btn-2d7876.pri-2d78c4{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 80%,transparent)}

/* 섹션 제목 */
.sec-head-2d78b5 h2::before{width:5px;border-radius:4px}
.sec-head-2d78b5 .more-2d78cf{padding:5px 11px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.sec-head-2d78b5 .more-2d78cf:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}

/* 카드 — 포스터 하단 그라데이션, 유리 평점 뱃지, 부드러운 떠오름 */
.card-2d782e{box-shadow:var(--shadow-sm);}
.card-2d782e .ph-2d7818::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.42),transparent);opacity:.7;transition:opacity .25s ease}
.card-2d782e:hover .ph-2d7818::after{opacity:1}
.score-2d787f{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1;
  background:color-mix(in srgb,var(--bg) 70%,transparent);box-shadow:0 4px 12px -6px rgba(0,0,0,.6)}
.card-2d782e .bd-2d78d8{display:flex;flex-direction:column;gap:2px}
.chip-2d78a1{transition:color .15s ease,border-color .15s ease,background .15s ease,transform .15s ease}
.chip-2d78a1:hover{background:var(--panel2);transform:translateY(-1px)}

/* 상세 */
.fact-2d7819{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.person-2d7831{background:var(--glass);transition:border-color .15s ease,transform .15s ease}
.person-2d7831:hover{border-color:var(--ring);transform:translateY(-2px)}
.prose-2d7874{color:var(--text-2)}

/* 푸터 */
footer.site-2d78d4{background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--panel) 55%,transparent))}

/* 등장 효과 — 첫 화면은 즉시, 아래 콘텐츠만 살짝 올라오며 나타난다 */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
section.blk-2d780e{animation:rise .5s var(--ease) both}
section.blk-2d780e:nth-of-type(2){animation-delay:.06s}
section.blk-2d780e:nth-of-type(3){animation-delay:.12s}

/* 스크롤바 — 어두운 테마에서 눈에 덜 띄게 */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}

/* ── 정돈 ──
   1) 좌우 여백은 **가장 바깥 .wrap-2d78a4 하나**만 맡는다(섹션 안 .wrap-2d78a4 이 또 패딩을 주면 본문이 안쪽으로 들어가
      히어로와 줄이 어긋난다).
   2) 위아래 간격은 8px 단위(8·16·24·32·48)만 쓴다. */
.wrap-2d78a4 .wrap-2d78a4{padding-left:0;padding-right:0}
.hero-2d78c4 h1{background:none;color:var(--text);-webkit-text-fill-color:currentcolor}
.hero-2d78c4 .sub-2d78b2{margin-top:10px}
.hero-2d78c4 .lead-2d786c{margin-top:12px;color:var(--text-2)}
.hero-2d78c4 .meta-2d78c5{margin-top:16px;gap:8px 18px}
.hero-cta-2d7885{margin-top:24px}
section.blk-2d780e{padding:clamp(24px,3.6vw,40px) 0}
body .blk-2d780e+.blk-2d780e{padding-top:0}
.sec-head-2d78b5{margin-bottom:16px;align-items:center}
.sec-head-2d78b5 h2{font-size:clamp(18px,2.2vw,22px)}

/* 상단 바만 따라오게 한다 — 장르·검색 줄(56px)은 스크롤하면 위로 사라져 화면을 덜 가린다.
   ⚠ top 음수 값은 아래 줄 높이와 같아야 한다. 아래 줄이 비면 되돌린다. */
.nav-below-2d7871{box-sizing:border-box}
.nav-below-2d7871:empty{display:none}
body.nav-float-2d7848 .nav-2d785e{background:transparent;box-shadow:none;border-bottom:0;
  backdrop-filter:none;-webkit-backdrop-filter:none}
body.nav-float-2d7848 .nav-in-2d78a4{background:color-mix(in srgb,var(--panel) 82%,transparent);
  backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px)}
/* 플로팅 내비 — 알약이 화면 가장자리에 붙지 않게 안쪽 여백을 둔다 */
body.nav-float-2d7848 .nav-in-2d78a4{margin:12px auto 0;width:min(var(--maxw),calc(100% - 2 * clamp(12px,3vw,24px)));
  padding-left:clamp(14px,2.4vw,22px);padding-right:10px}
/* 장르·검색 줄 — 장르는 왼쪽에 한 줄로, 검색은 오른쪽 끝. 줄이 따로 놀지 않게 한 행으로 묶는다 */
.nav-below-2d7871{display:flex;align-items:center;gap:12px}
.nav-below-2d7871 .nav-genres-2d782a{padding:0;flex:1 1 auto;min-width:0}
.nav-below-2d7871 .nav-search-2d78d0{margin-left:auto;flex:0 0 auto}
.nav-2d785e[data-spos="below"] .nav-below-2d7871 .nav-search-2d78d0 input[type=search]{width:clamp(180px,22vw,260px)}
.nav-search-2d78d0 input[type=search]{padding:10px 14px}
.nav-genres-2d782a::before{color:var(--accent)}
/* 본문의 "다른 장르" 줄은 위에 제목이 있으니 라벨을 또 달지 않는다 */
.blk-2d780e .nav-genres-2d782a::before{display:none}

/* 카드 — 가로형·순위형은 넓은 화면에서 2열로(한 줄에 하나면 가운데가 텅 빈다) */
body.cards-wide-2d7825 .grid-2d7894{grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr))}
body.cards-rank-2d786c .grid-2d7894{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
body.cards-compact-2d78be .card-2d782e .t-2d7882{font-size:14px}
.card-2d782e .t-2d7882{color:var(--text)}
.card-2d782e .ph-2d7818::after{opacity:.35}
.card-2d782e:hover .ph-2d7818::after{opacity:.6}

/* 요약 수치 4칸 — 숫자를 크게, 설명은 작게 */
.two-2d784e:has(> .person-2d7831){grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.two-2d784e > .person-2d7831{padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.two-2d784e > .person-2d7831 b{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em;color:var(--text)}
.two-2d784e > .person-2d7831 span{font-size:var(--t-sm)}

/* ══ 일관성 토큰 ══ 이 줄 아래 규칙은 **아래 값만** 쓴다. 새 값을 만들지 않는다.
   간격 4·8·12·16·24·32·48 / 글자 12·13·14·15·16(+제목) / 컨트롤 높이 36(모바일 40) / 모서리 컨트롤=--ctl-r 패널=--radius */
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --ctl-h:36px; --t-ui:14px;
  --sec-y:var(--sp-6);   /* 섹션 위아래 */
  --hero-y:var(--sp-7);  /* 히어로 위아래 */
}
body .blk-2d780e{padding:var(--sec-y) 0}
.sec-head-2d78b5{margin-bottom:var(--sp-4);gap:var(--sp-2) var(--sp-3)}
.sec-head-2d78b5 + .prose-2d7874{margin-top:0}
.prose-2d7874{margin-bottom:0}
.hero-in-2d7890{padding-top:var(--hero-y);padding-bottom:var(--hero-y)}
.statbar-in-2d78db{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
.grid-2d7894{gap:var(--gap)}
/* 컨트롤 — 높이·모서리·글자를 하나로 */
.btn-2d7876,.chip-2d78a1,.nav-genre-2d786b,.nav-search-2d78d0 button{min-height:var(--ctl-h);display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--ctl-r);font-size:var(--t-ui);line-height:1;padding:0 var(--sp-4);white-space:nowrap}
.chip-2d78a1,.nav-genre-2d786b{font-size:var(--t-sm);font-weight:700;padding:0 var(--sp-3)}
.nav-search-2d78d0 input[type=search],.page-search-2d7866 input[type=search]{min-height:var(--ctl-h);border-radius:var(--ctl-r);
  font-size:var(--t-ui);padding:0 var(--sp-4)}
.fact-2d7819{border-radius:var(--ctl-r);font-size:var(--t-sm);padding:var(--sp-1) var(--sp-3)}
.brand-2d78f3{min-height:var(--ctl-h)}
.foot-links-2d7840{gap:var(--sp-2) var(--sp-5)}
.foot-links-2d7840 a{display:inline-flex;align-items:center;min-height:var(--ctl-h)}
.hero-cta-2d7885,.ad-btns-2d7875{gap:var(--sp-3)}
.hero-cta-2d7885{margin-top:var(--sp-5)}
body.nav-float-2d7848 .nav-in-2d78a4,.hero-2d78c4 .eyebrow-2d78ca,.score-2d787f,.sec-head-2d78b5 .more-2d78cf,.card-2d782e .y-2d78cc .gc-2d7835,.nav-genre-2d786b,.chip-2d78a1{border-radius:var(--ctl-r)}
.hero-2d78c4 .prose-2d7874{font-size:var(--t-body);color:var(--text-2);margin-top:var(--sp-3);white-space:normal}
.detail-in-2d78e1 .prose-2d7874{font-size:var(--t-body);margin-top:var(--sp-4)}
/* 검색 페이지 */
.section-2d78ba{padding:var(--sec-y) 0 var(--sp-6)}
.section-2d78ba .eyebrow-2d78ca{display:block;font-size:var(--t-cap);font-weight:800;letter-spacing:.1em;color:var(--accent);margin:0 0 var(--sp-2)}
.section-2d78ba h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.03em}
.page-search-2d7866{margin:var(--sp-4) 0 var(--sp-3)}
.page-search-2d7866 input[type=search]{min-height:48px;font-size:16px;max-width:560px;width:100%}
.section-2d78ba > .wrap-2d78a4 > .small-2d78bd{font-size:var(--t-sm);margin:0 0 var(--sp-4)}
/* ⚠ .ph-2d7818 는 <span> 이라 기본이 inline 이다. inline 에서는 aspect-ratio 가 무시되어
   포스터 높이가 이미지 로딩 상태·원본 비율에 따라 제멋대로(세로로 길게) 늘어났다 → block 으로 고정 */
.card-2d782e .ph-2d7818{display:block;width:100%}
body.cards-wide-2d7825 .card-2d782e .ph-2d7818{width:104px}
body.cards-rank-2d786c .card-2d782e .ph-2d7818{width:52px}
/* 포스터를 따로 보여 주지 않는 히어로(center·minimal) — 포스터/백드롭을 **배경**으로 깔아 빈 느낌을 없앤다 */
body.hero-center-2d7891 .hero-in-2d7890,body.hero-minimal-2d7802 .hero-in-2d7890{position:relative}
body.hero-center-2d7891 .hero-bg-2d78d8,body.hero-minimal-2d7802 .hero-bg-2d78d8{position:absolute;inset:0;background-size:cover;background-position:center 22%;opacity:.7;filter:saturate(1.1)}
body.hero-center-2d7891 .hero-2d78c4::after,body.hero-minimal-2d7802 .hero-2d78c4::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 3%,color-mix(in srgb,var(--bg) 50%,transparent) 48%,color-mix(in srgb,var(--bg) 20%,transparent))}
/* 배경 이미지가 또렷해진 만큼 글자가 묻히지 않게 — 배경색 후광(그림자)으로 대비를 만든다 */
body.hero-poster-2d7864 .hero-in-2d7890,body.hero-center-2d7891 .hero-in-2d7890,body.hero-minimal-2d7802 .hero-in-2d7890{text-shadow:0 1px 3px color-mix(in srgb,var(--bg) 85%,transparent),0 0 22px color-mix(in srgb,var(--bg) 75%,transparent)}
body.hero-poster-2d7864 .hero-in-2d7890 .btn-2d7876,body.hero-center-2d7891 .hero-in-2d7890 .btn-2d7876,body.hero-minimal-2d7802 .hero-in-2d7890 .btn-2d7876{text-shadow:none}
body.hero-poster-2d7864 .hero-2d78c4 h1,body.hero-center-2d7891 .hero-2d78c4 h1,body.hero-minimal-2d7802 .hero-2d78c4 h1{-webkit-text-fill-color:currentcolor}
body.hero-center-2d7891 .hero-in-2d7890>*,body.hero-minimal-2d7802 .hero-in-2d7890>*{position:relative;z-index:1}
/* 카드 안쪽 */
.card-2d782e .bd-2d78d8{padding:var(--sp-3) var(--sp-3) var(--sp-4);gap:var(--sp-1)}
body.cards-wide-2d7825 .card-2d782e .bd-2d78d8{padding:var(--sp-3) var(--sp-4);gap:var(--sp-2)}
.card-2d782e .y-2d78cc{margin-top:var(--sp-1);gap:var(--sp-2)}
.card-2d782e .y-2d78cc .gc-2d7835{font-size:var(--t-cap);padding:1px var(--sp-2)}
.score-2d787f{font-size:var(--t-cap);padding:var(--sp-1) var(--sp-2)}
/* 본문 글줄 */
.prose-2d7874{line-height:var(--lh-body)}
.facts-2d7872{gap:var(--sp-2);margin-top:var(--sp-4)}
.detail-in-2d78e1 .facts-2d7872{margin-top:var(--sp-4)}
.person-2d7831{padding:var(--sp-3) var(--sp-4)}
.people-2d782f{gap:var(--sp-2)}

/* 터치 기기 — 호버가 없으니 누르는 느낌만 주고, 터치 영역을 넉넉히 */
@media (hover:none){
  .card-2d782e:hover,.btn-2d7876:hover,.chip-2d78a1:hover,.person-2d7831:hover,.nav-genre-2d786b:hover{transform:none}
  .card-2d782e:active{transform:scale(.985)}
  .btn-2d7876,.nav-genre-2d786b,.chip-2d78a1{min-height:40px}
}

/* ── 반응형 — 중단점을 단계별로 나눈다 ──
   1200(작은 데스크톱) · 900(태블릿) · 640(큰 폰) · 480(작은 폰)
   단계를 나눠 두면 "어느 폭에서 왜 깨지는지"를 추적하기 쉽다. */
@media (max-width:1200px){
  /* 작은 데스크톱 — 카드가 과하게 커지지 않게 */
  .grid-2d7894{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
}
@media (max-width:900px){
  /* 태블릿 — 2단(히어로·상세·feature)을 1단으로 내린다 */
  body.hero-split-2d789c .hero-grid-2d78f7,body.hero-mirror-2d7853 .hero-grid-2d78f7{grid-template-columns:1fr}
  body.hero-split-2d789c .hero-art-2d788c,body.hero-mirror-2d7853 .hero-art-2d788c{justify-self:start;max-width:200px}
  /* 좁으면 반전이 의미가 없다 — 포스터를 위로 올려 글보다 먼저 보이게 한다 */
  body.hero-mirror-2d7853 .hero-art-2d788c{order:-1}
  body.hero-band-2d7882 .hero-art-2d788c{aspect-ratio:16/9}
  .detail-in-2d78e1{grid-template-columns:1fr}
  .detail-in-2d78e1 .art-2d7851{max-width:156px;margin:0}
  .feature-split-2d787b{grid-template-columns:1fr !important;gap:16px}
  .two-2d784e{grid-template-columns:1fr !important}
  footer.site-2d78d4[data-layout="cols"] .foot-cols-2d7806{grid-template-columns:1fr;gap:14px}
}
@media (max-width:640px){
  /* ── 모바일 네비 — 위치 설정과 무관하게 **2줄로 고정** ──
     data-gpos / data-spos 조합에 따라 검색·장르가 각각 별도 줄을 차지해
     상단이 240px 까지 높아졌다(모바일에서 화면 1/3).
     1줄: 브랜드 + 메뉴(검색 포함), 2줄: 장르(가로 스크롤).
     검색 폼은 nav-links **안에** 들어가는 경우가 있어 그쪽 규칙도 함께 둔다. */
  .nav-in-2d78a4{display:grid !important;grid-template-columns:auto auto minmax(0,1fr);
    gap:6px 8px;height:auto;padding-top:8px;padding-bottom:8px;align-items:center}
  /* 햄버거를 1열에 **명시 배치**한다 — grid item 으로 두면 자동 배치가 새 행을 만들어 높이가 는다 */
  .nav-in-2d78a4 .menuBtn-2d788f{grid-column:1;grid-row:1;margin-right:0}
  .nav-in-2d78a4 .brand-2d78f3{grid-column:2;grid-row:1;min-width:0}
  .nav-in-2d78a4 .nav-links-2d782c{grid-column:3;grid-row:1;display:flex;align-items:center;gap:8px;
    width:auto;margin-left:0;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-end;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-in-2d78a4 .nav-links-2d782c::-webkit-scrollbar{display:none}
  .nav-in-2d78a4 .nav-links-2d782c .nav-search-2d78d0{margin-left:0;flex:0 0 auto;width:auto}
  .nav-in-2d78a4 > .nav-search-2d78d0{grid-column:3;grid-row:1;width:auto;margin-left:0;
    justify-content:flex-end;flex-wrap:nowrap}
  .nav-in-2d78a4 .nav-search-2d78d0 input[type=search]{width:clamp(72px,24vw,120px);padding:7px 9px;font-size:13px}
  .nav-in-2d78a4 .nav-search-2d78d0 button{padding:7px 10px;font-size:13px}

  /* ── 검색은 아이콘으로 접고, 누르면(포커스) 펼친다 ──
     상단에서 검색이 차지하던 한 줄을 없앤다. 버튼이 없어도 폼 안에서 Enter 로 전송된다.
     nav-below 에 홀로 있는 경우에는 **오른쪽 위로 띄워** 줄 자체를 없앤다. */
  .nav-2d785e,.nav-2d785e:has(> .nav-below-2d7871:not(:empty)){position:relative;top:0}
  .nav-2d785e > .nav-below-2d7871{min-height:0}
  /* ⚠ 뒤에 오는 width:auto 규칙들(nav-below·nav-links 안)이 이기므로 !important 로 고정한다 */
  .nav-search-2d78d0{position:relative;flex:0 0 auto;width:40px !important;overflow:hidden;
    transition:width .18s ease;border-radius:4px}
  .nav-search-2d78d0::before{content:"";position:absolute;left:0;top:0;width:40px;height:100%;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www%2Ew3%2Eorg/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5l-4-4'/%3E%3C/svg%3E") center/18px no-repeat;
    pointer-events:none;z-index:1}
  .nav-search-2d78d0 input[type=search]{width:100% !important;padding:8px 10px;font-size:13px;
    text-indent:-9999px;cursor:pointer}
  .nav-search-2d78d0 button{display:none}
  .nav-search-2d78d0:focus-within{width:min(210px,54vw) !important}
  .nav-search-2d78d0:focus-within::before{display:none}
  .nav-search-2d78d0:focus-within input[type=search]{text-indent:0;cursor:text}
  .nav-search-2d78d0:focus-within button{display:inline-block;padding:8px 11px;font-size:13px}
  .nav-2d785e > .nav-below-2d7871 .nav-search-2d78d0{position:absolute;top:8px;right:16px;margin:0;z-index:6;padding:0}
  /* ⚠ .nav-2d785e[data-gpos="brand"] .nav-genres-2d782a 가 명시도가 더 높아 wrap 을 되돌린다
     (그래서 장르 pill 이 여러 줄이 되어 상단이 200px 를 넘었다) → !important 로 고정한다. */
  .nav-in-2d78a4 .nav-genres-2d782a,.nav-2d785e > .nav-below-2d7871 .nav-genres-2d782a{
    grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:nowrap !important;
    overflow-x:auto;margin:0;padding-bottom:2px;scrollbar-width:none}
  .nav-in-2d78a4 .nav-genres-2d782a::-webkit-scrollbar,.nav-2d785e > .nav-below-2d7871 .nav-genres-2d782a::-webkit-scrollbar{display:none}
  /* ⚠ 위치 설정이 'below' 면 장르·검색이 **nav-in 밖**(nav-below)에 온다.
     여기서 한 줄 가로 스크롤로 묶지 않으면 장르 pill 이 여러 줄로 wrap 되어
     상단이 210px 까지 높아진다(실제로 그랬다). */
  .nav-2d785e > .nav-below-2d7871{padding:0 16px 8px;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .nav-2d785e > .nav-below-2d7871:empty{display:none}
  .nav-2d785e > .nav-below-2d7871 .nav-genres-2d782a{display:flex;flex-wrap:nowrap !important;overflow-x:auto;
    margin:0;padding:0 0 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1 1 auto}
  .nav-2d785e > .nav-below-2d7871 .nav-genres-2d782a::-webkit-scrollbar{display:none}
  .nav-2d785e > .nav-below-2d7871 .nav-search-2d78d0{margin:0;padding:0;width:auto;flex:0 0 auto;
    justify-content:flex-start;flex-wrap:nowrap}
  .nav-2d785e > .nav-below-2d7871 .nav-search-2d78d0 input[type=search]{width:clamp(96px,40vw,180px);padding:7px 9px;font-size:13px}
  .nav-2d785e > .nav-below-2d7871 .nav-search-2d78d0 button{padding:7px 11px;font-size:13px}

  .wrap-2d78a4{padding-left:16px;padding-right:16px}
  .hero-in-2d7890{padding-top:24px;padding-bottom:24px}
  .hero-2d78c4 h1{font-size:clamp(24px,7.4vw,34px)}

  /* ── 모바일 히어로 재설계 ──
     'stack' 은 포스터가 **위에** 오는 구조라 좁은 화면에서 세로로 가장 길었다
     (포스터 + 중앙 정렬 글 → 첫 화면이 그것만으로 꽉 참).
     좁을 때는 포스터를 **배경으로 깔고** 글을 **왼쪽 정렬**해
     세로를 줄이고 첫 화면에 영화 카드가 보이게 한다. */
  body.hero-stack-2d7828 .hero-grid-2d78f7{position:relative;display:block;text-align:left;gap:0}
  body.hero-stack-2d7828 .hero-art-2d788c{
    display:block;position:absolute;inset:0;width:100%;height:100%;
    max-width:none;aspect-ratio:auto;z-index:0;opacity:.34;border:0;border-radius:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 24%,transparent 88%);
    mask-image:linear-gradient(to bottom,#000 24%,transparent 88%);
  }
  body.hero-stack-2d7828 .hero-art-2d788c img{object-position:center 20%}
  body.hero-stack-2d7828 .hero-grid-2d78f7 > *:not(.hero-art-2d788c){position:relative;z-index:1}
  body.hero-stack-2d7828 .hero-in-2d7890{align-items:flex-start;text-align:left}
  body.hero-stack-2d7828 .hero-2d78c4 .lead-2d786c{margin-left:0;margin-right:0}
  body.hero-stack-2d7828 .hero-cta-2d7885{justify-content:flex-start}

  /* 카드 — 좁은 화면에서 2열, compact 면 3열(포스터가 작아 밀도가 올라간다) */
  .grid-2d7894{grid-template-columns:repeat(auto-fill,minmax(138px,1fr)) !important;gap:12px}
  body.cards-compact-2d78be .grid-2d7894{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)) !important;gap:9px}
  /* 가로형·순위형은 한 줄에 하나 — 위 auto-fill 이 이기면 글이 한 글자씩 꺾인다 */
  body.cards-wide-2d7825 .grid-2d7894,body.cards-rank-2d786c .grid-2d7894{grid-template-columns:1fr !important}
  body.cards-wide-2d7825 .card-2d782e .ph-2d7818{width:92px}
  .nav-genre-2d786b{box-shadow:none}
  .card-2d782e .t-2d7882{font-size:13px}
  .card-2d782e .y-2d78cc{font-size:12px}
  .sec-head-2d78b5{margin-bottom:13px}

  /* 상세 — 좁은 화면에서는 포스터를 **작게** 하고 정보를 위로 올린다.
     예전에는 260px 중앙 정렬이라 첫 화면이 포스터로만 찼다. */
  .detail-in-2d78e1{gap:16px;padding:22px 0}
  .detail-in-2d78e1 .art-2d7851{max-width:176px;margin:0}
  .detail-in-2d78e1 h1{font-size:clamp(21px,6.4vw,28px)}
  .detail-in-2d78e1 .facts-2d7872{margin-top:14px;gap:8px}
  .fact-2d7819{padding:4px 10px;font-size:12px}
  .rank-rows-2d78f0 li a{gap:10px;padding:7px 8px}
  .strip-item-2d784e{flex:0 0 124px}
  .foot-in-2d7828{flex-direction:column;align-items:flex-start;gap:6px}
  footer.site-2d78d4[data-layout="center"] .foot-in-2d7828{align-items:center}
  .stats-2d78cd,.facts-2d7872{gap:8px}
}
@media (max-width:480px){
  /* 작은 폰 — 여백·타이포를 한 단계 더 줄인다 */
  .hero-2d78c4 h1{font-size:clamp(23px,8.4vw,30px)}
  .grid-2d7894{grid-template-columns:repeat(auto-fill,minmax(128px,1fr)) !important;gap:11px}
  .strip-item-2d784e{flex:0 0 108px}
  .stats-2d78cd{grid-template-columns:1fr !important}
  .facts-2d7872{gap:6px}
  .fact-2d7819{font-size:12px;padding:4px 10px}
  .foot-about-2d789c{padding:0 0 16px;margin:0 0 16px}
  footer.site-2d78d4{padding:28px 0 38px}
  .foot-links-2d7840{gap:12px;font-size:13px;padding:16px 0 0}
}
/* ── 데스크톱 상단 바 ── 윗줄(로고·장르·검색)만 따라온다. 아랫줄(장르·검색)은 스크롤하면 사라진다.
   ⚠ 예전에는 고정 높이(56~62px) 안에서 줄바꿈이 일어나 요소가 바깥으로 넘쳐 본문과 겹쳤다.
      → 높이는 내용에 맞추고, 장르는 줄바꿈 대신 가로 스크롤로 둔다. */
@media (min-width:641px){
  .nav-2d785e{display:contents}
  body .nav-2d785e[data-gpos] .nav-in-2d78a4{height:auto;flex-wrap:nowrap}
  .nav-in-2d78a4{position:sticky;top:0;z-index:30;height:auto;min-height:56px;flex-wrap:nowrap;
    gap:var(--sp-3);padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
  body.nav-float-2d7848 .nav-in-2d78a4{top:8px}
  body:not(.nav-float-2d7848) .nav-in-2d78a4{width:100%;max-width:none;
    padding-left:max(clamp(16px,4vw,32px),calc((100% - var(--maxw)) / 2 + clamp(16px,4vw,32px)));
    padding-right:max(clamp(16px,4vw,32px),calc((100% - var(--maxw)) / 2 + clamp(16px,4vw,32px)));
    background:color-mix(in srgb,var(--bg) 80%,transparent);
    backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);
    border-bottom:1px solid var(--line);box-shadow:0 12px 28px -24px rgba(0,0,0,.8)}
  .nav-in-2d78a4 .brand-2d78f3{flex:none}
  /* 남는 가로 공간은 **장르 목록**이 모두 쓴다. 메뉴·검색이 따로 같이 늘어나면 공간을 반반 나눠 가져 장르가 잘리고 오른쪽이 비었다 */
  .nav-in-2d78a4 .nav-links-2d782c{flex:0 1 auto;min-width:0;margin-left:auto;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:var(--sp-2)}
  .nav-in-2d78a4 .nav-links-2d782c:has(.nav-genres-2d782a){flex:1 1 auto}
  .nav-2d785e .nav-in-2d78a4 .nav-genres-2d782a{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;padding:0;scrollbar-width:none;align-items:center}
  .nav-in-2d78a4 .nav-genres-2d782a::-webkit-scrollbar{display:none}
  .nav-in-2d78a4 .nav-search-2d78d0{flex:none}
  .nav-below-2d7871{padding-top:var(--sp-3);padding-bottom:var(--sp-3);min-height:0}
}
@media (max-width:640px){
  :root{ --ctl-h:40px; --sec-y:var(--sp-5); --hero-y:var(--sp-5) }
  /* 좁은 화면에서 포스터를 글 뒤에 깔면 포스터 속 글자와 겹쳐 지저분하다 — 감춘다(아래 카드에서 보인다) */
  body.hero-stack-2d7828 .hero-art-2d788c{display:none}
  /* 상세 — 포스터를 작게 옆으로 붙이고 제목·평점을 먼저 보여준다. 줄거리·출연은 전체 폭 */
  .detail-in-2d78e1{grid-template-columns:104px minmax(0,1fr);gap:var(--sp-2) var(--sp-4)}
  .detail-in-2d78e1 > div:not(.art-2d7851){display:contents}
  .detail-in-2d78e1 .art-2d7851{grid-row:1 / span 3;max-width:none;width:100%}
  .detail-in-2d78e1 h1,.detail-in-2d78e1 .tag-2d7864,.detail-in-2d78e1 .facts-2d7872{grid-column:2}
  .detail-in-2d78e1 h1{align-self:end;font-size:clamp(20px,6vw,26px)}
  .detail-in-2d78e1 .tag-2d7864{margin-top:0}
  .detail-in-2d78e1 .facts-2d7872{margin-top:0;align-self:start}
  .detail-in-2d78e1 > div > *:not(h1):not(.tag-2d7864):not(.facts-2d7872){grid-column:1 / -1}
  .detail-in-2d78e1 .ad-btns-2d7875{margin-top:var(--sp-3)}
}
@media (max-width:900px){
  .two-2d784e:has(> .person-2d7831){grid-template-columns:repeat(2,1fr) !important}
}
/* 장르 줄 안쪽 여백은 위아래 같게 — 예전에는 10px/14px 이라 버튼이 바 안에서 아래로 치우쳤다 */
.nav-in-2d78a4 .nav-genres-2d782a,.nav-below-2d7871 .nav-genres-2d782a{padding-top:0;padding-bottom:0}
.nav-in-2d78a4{align-items:center}
/* ── 햄버거 메뉴를 열었을 때 ──
   스크립트가 메뉴(.nav-links-2d782c)를 세로로 펼친다. 예전에는 한 줄짜리 격자 칸에 그대로 들어가
   검색 버튼이 어긋나게 아래로 떨어졌다. → 바 아래 **전체 폭 패널**로 펼치고,
   장르는 줄바꿈, 검색창은 한 줄 가득, 버튼도 보이게 한다. */
@media (max-width:720px){
  body .nav-2d785e.navOpen-2d78ef .nav-in-2d78a4{flex-wrap:wrap;align-items:center;row-gap:var(--sp-2)}
  body .nav-2d785e.navOpen-2d78ef .nav-in-2d78a4{height:auto !important;border-radius:var(--radius);padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
  .nav-2d785e.navOpen-2d78ef .nav-in-2d78a4 > .nav-genres-2d782a{flex-wrap:wrap !important;overflow:visible}
  .nav-2d785e.navOpen-2d78ef .nav-in-2d78a4 .nav-links-2d782c{grid-column:1 / -1;grid-row:3;flex:1 1 100%;order:9;width:100%;margin:var(--sp-2) 0 0;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;overflow:visible;gap:var(--sp-3)}
  .nav-2d785e.navOpen-2d78ef .nav-in-2d78a4 .nav-links-2d782c > a{padding:0 var(--sp-3);min-height:var(--ctl-h);display:flex;align-items:center}
  .nav-2d785e.navOpen-2d78ef .nav-in-2d78a4 .nav-links-2d782c .nav-genres-2d782a,.nav-2d785e.navOpen-2d78ef .nav-below-2d7871 .nav-genres-2d782a{flex-wrap:wrap !important;overflow:visible;padding:0}
  .nav-2d785e.navOpen-2d78ef .nav-search-2d78d0{width:100% !important;overflow:visible;display:flex;flex:1 1 auto;gap:var(--sp-2);margin:0}
  .nav-2d785e.navOpen-2d78ef .nav-search-2d78d0::before{display:none}
  .nav-2d785e.navOpen-2d78ef .nav-search-2d78d0 input[type=search]{flex:1 1 auto;width:auto !important;min-width:0;text-indent:0;cursor:text;padding:0 var(--sp-4);font-size:16px}
  .nav-2d785e.navOpen-2d78ef .nav-search-2d78d0 button{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}