*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#04101a; --panel:#0a1c2b; --panel2:#0f2536; --line:#1b3a52;
  --text:#e6f2fa; --muted:#87a4b8; --accent:#22c1e0; --accent2:#4f8cff;
  --radius:22px; --ctl-r:999px; --card-r:22px; --gap:12px; --pad:12px; --maxw:1180px;
  /* ── 타이포 스케일 ── 값을 여기서만 정한다.
     요소마다 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-dc2237{width:min(var(--maxw),100%);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
/* 페이지 폭 변형 */
body.width-narrow-dc22b7{--maxw:1000px}
body.width-wide-dc224e{--maxw:1340px}
/* 통계줄 — 히어로를 쓰지 않는 골격에서 첫 화면 역할 */
.statbar-dc22ca{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 55%,transparent)}
.statbar-in-dc222f{padding-top:clamp(22px,3.4vw,36px);padding-bottom:clamp(18px,3vw,30px)}
.statbar-in-dc222f h1{font-size:clamp(24px,4vw,38px);font-weight:800;letter-spacing:-.03em;margin:2px 0 4px}
.stats-line-dc2243{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.stats-line-dc2243 b{color:var(--text)}
.muted-dc22c0{color:var(--muted)}
.tiny-dc22b4{font-size:12px}
.mono-dc226c{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* nav */
.nav-dc22c3{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-dc22f8{display:flex;align-items:center;gap:14px;height:62px}
.brand-dc2258{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;min-width:0}
.brand-dc2258 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-dc2258 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-links-dc2229{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.nav-links-dc2229 a{padding:7px 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)}
.nav-links-dc2229 a:hover{color:var(--text);background:var(--panel2)}
/* 상단 장르 버튼 — 알약(pill) 형태로 또렷하게. 스크롤해도 한 줄로 유지된다 */
.nav-genres-dc2221{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 14px}
.nav-genre-dc2249{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-dc2249:hover{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;transform:translateY(-1px)}
.nav-genres-dc2221::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-dc22c3[data-gpos="brand"] .nav-in-dc22f8{flex-wrap:wrap;gap:10px}
.nav-dc22c3[data-gpos="brand"] .nav-genres-dc2221{display:flex;flex-wrap:wrap;gap:8px;padding:0;order:2}
.nav-dc22c3[data-gpos="brand"] .nav-links-dc2229{order:3}
.nav-below-dc22b3{padding-top:10px;padding-bottom:14px}
.nav-below-dc22b3:empty{display:none}
/* 검색 폼 — 위치가 사이트마다 다르다 */
.nav-search-dc223d{display:flex;gap:6px;align-items:center;order:2}
.nav-search-dc223d 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-dc223d 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-dc22c3[data-spos="below"] .nav-search-dc223d input[type=search]{width:min(420px,70vw)}
.page-search-dc22ac{display:flex;gap:8px;margin:18px 0 10px}
.page-search-dc22ac 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-dc2242{display:flex;flex-wrap:wrap;gap:16px;padding:20px 0 0;font-size:14px;font-weight:600}
.foot-links-dc2242 a{color:var(--muted)}
.foot-links-dc2242 a:hover{color:var(--text)}

/* ── 섹션 표현 변형(마크업 자체가 다르다) ── 순위 행 · 가로 띠 · 피처+목록 */
.rank-rows-dc22fc{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.rank-rows-dc22fc 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-dc22fc li a:hover{border-color:var(--accent)}
.rank-no-dc2273{min-width:26px;font-weight:800;color:var(--accent);font-size:15px;text-align:center}
.rank-art-dc2221 img{border-radius:8px;display:block;object-fit:cover}
.rank-txt-dc22ec{display:flex;flex-direction:column;gap:2px;min-width:0}
.rank-txt-dc22ec b{font-size:16px}
.strip-dc223f{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.strip-item-dc2233{flex:0 0 150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-width:0}
.strip-item-dc2233 img{width:100%;height:auto;border-radius:12px;display:block}
.strip-item-dc2233 b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feature-split-dc22a1{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:var(--sp-5);align-items:start}
.feature-main-dc221e{display:flex;flex-direction:column;gap:10px}
.feature-main-dc221e img{width:100%;max-width:240px;height:auto;border-radius:16px;display:block}
.feature-main-dc221e b{font-size:20px}
.feature-list-dc2245{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.feature-list-dc2245 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-dc2245 a:hover{border-color:var(--accent)}

/* ── 모바일 ── 좁은 화면에서 메뉴·검색·카드가 넘치지 않게 */
body.nav-float-dc2294 .nav-dc22c3{background:transparent;border-bottom:0;position:sticky;padding-top:12px}
body.nav-float-dc2294 .nav-in-dc22f8{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-dc22fa{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-in-dc22ef{padding-top:clamp(28px,4.6vw,60px);padding-bottom:clamp(28px,4.6vw,60px)}
.hero-dc22fa .eyebrow-dc224f{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-dc22fa .eyebrow-dc224f::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.hero-dc22fa 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-dc22fa .sub-dc2296{margin:8px 0 0;font-size:var(--t-mid);font-weight:700;color:var(--accent)}
.hero-dc22fa .lead-dc22f8{margin:8px 0 0;color:var(--text-2);font-size:var(--t-body);max-width:64ch;line-height:1.65}
.hero-dc22fa .meta-dc2246{margin-top:11px;display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.hero-dc22fa .meta-dc2246 b{color:var(--text)}
.hero-cta-dc2240{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.btn-dc22dd{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:22px;
  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-dc22dd.pri-dc2237{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}
.btn-dc22dd.ghost-dc2262{background:transparent;color:var(--text-2)}
.btn-dc22dd:hover{filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 8px 20px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-dc22dd:active{transform:translateY(0)}
/* 상세 페이지 광고 버튼 (관리자 화면에서 추가 — 새 탭으로 열린다) */
.ad-btns-dc22c2{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ad-btns-dc22c2 .btn-dc22dd{font-size:14px;padding:12px 20px}
.ad-btns-dc22c2 .ext-dc22d2{font-size:12px;opacity:.85}

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

/* 히어로 아트는 split / mirror / stack / band 에서만 노출 — 나머지는 텍스트 중심 */
.hero-art-dc22af{max-width:280px}
body.hero-center-dc22d9 .hero-grid-dc222b,body.hero-poster-dc22fb .hero-grid-dc222b{display:block}
body.hero-center-dc22d9 .hero-art-dc22af,body.hero-poster-dc22fb .hero-art-dc22af,body.hero-minimal-dc223c .hero-art-dc22af{display:none}
.art-dc22a3{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-dc22a3 img{width:100%;height:100%;object-fit:cover}

/* sections */
section.blk-dc2257{padding:clamp(30px,5vw,56px) 0}
.sec-head-dc2275{display:flex;align-items:flex-end;gap:14px;margin-bottom:var(--gap);flex-wrap:wrap}
/* ── 섹션 헤더 ── 제목 왼쪽에 accent 바를 두고 오른쪽에 보조 정보를 붙인다.
   예전에는 <h2> 하나만 있어서 섹션 경계가 밋밋했다. */
.sec-head-dc2275{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sec-head-dc2275 h2{display:flex;align-items:center;gap:10px;font-size:var(--t-h2);font-weight:800;letter-spacing:-.03em}
.sec-head-dc2275 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-dc2275 .sub-dc2296{color:var(--muted);font-size:13px}
.sec-head-dc2275 .more-dc2214{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-dc2275 .more-dc2214:hover{gap:9px}

/* cards */
.grid-dc22c0{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
body.cards-compact-dc22b4 .grid-dc22c0{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px}
.card-dc22d8{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-dc22d8: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-dc22d8 .ph-dc22d2{position:relative;aspect-ratio:2/3;background:var(--panel2);overflow:hidden}
.card-dc22d8 .ph-dc22d2 img{width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.card-dc22d8:hover .ph-dc22d2 img{transform:scale(1.045)}
.card-dc22d8 .t-dc223d{transition:color .16s ease}
.card-dc22d8:hover .t-dc223d{color:color-mix(in srgb,var(--accent) 80%,var(--text))}
.card-dc22d8 .bd-dc22c4{padding:12px 13px 14px}
.card-dc22d8 .t-dc223d{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-dc22d8 .y-dc225f{color:var(--muted);font-size:var(--t-sm);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card-dc22d8 .y-dc225f .yy-dc225c{font-variant-numeric:tabular-nums;opacity:.9}
/* 카드 장르 칩 — 제목·연도만 있던 카드에 정보를 더한다 */
.card-dc22d8 .y-dc225f .gc-dc22fc{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-dc22d8:hover .y-dc225f .gc-dc22fc{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.score-dc22d9{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-dc2282 .grid-dc22c0{grid-template-columns:1fr}
body.cards-wide-dc2282 .card-dc22d8{display:flex;align-items:stretch;gap:0}
body.cards-wide-dc2282 .card-dc22d8 .ph-dc22d2{width:104px;flex:none;aspect-ratio:2/3}
body.cards-wide-dc2282 .card-dc22d8 .bd-dc22c4{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:14px 16px}
body.cards-wide-dc2282 .card-dc22d8 .ov-dc2252{color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

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

/* 카드 형태별 요소 노출 제어 */
.card-dc22d8 .no-dc225d{display:none}
.card-dc22d8 .ov-dc2252{display:none}
body.cards-rank-dc2204 .card-dc22d8 .no-dc225d{display:block}
body.cards-wide-dc2282 .card-dc22d8 .ov-dc2252{display:-webkit-box}

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

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

/* footer */
footer.site-dc22ee{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-dc2227{display:flex;gap:18px;flex-wrap:wrap;align-items:center;text-align:left}
.gen-dc22fd{opacity:.75;font-size:12px}
/* ── footer 레이아웃 변형 ── 사이트마다 다르다(print.footer-dc2278). 예전에는 넷 다 같은 구조였다 */
footer.site-dc22ee[data-layout="center"]{ text-align:center; }
footer.site-dc22ee[data-layout="center"] .foot-about-dc225c{ max-width:none; }
footer.site-dc22ee[data-layout="center"] .foot-in-dc2227{ flex-direction:column; align-items:center; gap:6px; text-align:center; }
footer.site-dc22ee[data-layout="center"] .foot-links-dc2242{ justify-content:center; }
footer.site-dc22ee[data-layout="center"] .foot-about-dc225c{ margin-left:auto; margin-right:auto; text-align:center; }
footer.site-dc22ee[data-layout="center"] .foot-about-dc225c .prose-dc220d,footer.site-dc22ee[data-layout="center"] .foot-about-dc225c .small-dc22e0{ margin-left:auto; margin-right:auto; text-align:center; }
footer.site-dc22ee[data-layout="cols"] .foot-cols-dc22d2{
  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-dc22ee[data-layout="cols"] .foot-cols-dc22d2 .foot-in-dc2227{ flex-direction:column; align-items:flex-start; gap:4px; }
footer.site-dc22ee[data-layout="cols"] .foot-links-dc2242{ padding:0; }
footer.site-dc22ee[data-layout="compact"] .foot-links-dc2242{ padding:16px 0 0; }
footer.site-dc22ee[data-layout="compact"] .foot-in-dc2227{ padding-bottom:20px; border-bottom:1px solid var(--line); }
footer.site-dc22ee[data-layout="compact"] .foot-about-dc225c{ border-bottom:0; margin-bottom:0; padding:20px 0 0; }
.gen-dc22fd b{color:var(--accent)}
.sitemap-links-dc22e6{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-dc22d8:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
img{background:var(--panel2)}

/* 상단 바 — 유리 질감 + 가는 하이라이트 선 */
.nav-dc22c3{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-dc2258{font-size:17px}
.nav-links-dc2229 a{transition:background .15s ease,color .15s ease}
.nav-search-dc223d input[type=search]{transition:border-color .15s ease,box-shadow .15s ease}
.nav-search-dc223d 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-dc2249{box-shadow:var(--shadow-sm)}

/* 히어로 — 은은한 빛과 포스터 입체감 */
.hero-dc22fa{background:
  radial-gradient(640px 280px at 85% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
.hero-dc22fa .eyebrow-dc224f{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-dc22fa .eyebrow-dc224f::before{width:14px}
.hero-dc22fa .art-dc22a3,.detail-in-dc2261 .art-dc22a3{border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent)}
.btn-dc22dd{box-shadow:var(--shadow-sm)}
.btn-dc22dd.pri-dc2237{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 80%,transparent)}

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

/* 카드 — 포스터 하단 그라데이션, 유리 평점 뱃지, 부드러운 떠오름 */
.card-dc22d8{box-shadow:var(--shadow-sm);}
.card-dc22d8 .ph-dc22d2::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-dc22d8:hover .ph-dc22d2::after{opacity:1}
.score-dc22d9{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-dc22d8 .bd-dc22c4{display:flex;flex-direction:column;gap:2px}
.chip-dc2282{transition:color .15s ease,border-color .15s ease,background .15s ease,transform .15s ease}
.chip-dc2282:hover{background:var(--panel2);transform:translateY(-1px)}

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

/* 푸터 */
footer.site-dc22ee{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-dc2257{animation:rise .5s var(--ease) both}
section.blk-dc2257:nth-of-type(2){animation-delay:.06s}
section.blk-dc2257:nth-of-type(3){animation-delay:.12s}

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

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

/* 상단 바만 따라오게 한다 — 장르·검색 줄(56px)은 스크롤하면 위로 사라져 화면을 덜 가린다.
   ⚠ top 음수 값은 아래 줄 높이와 같아야 한다. 아래 줄이 비면 되돌린다. */
.nav-below-dc22b3{box-sizing:border-box}
.nav-below-dc22b3:empty{display:none}
body.nav-float-dc2294 .nav-dc22c3{background:transparent;box-shadow:none;border-bottom:0;
  backdrop-filter:none;-webkit-backdrop-filter:none}
body.nav-float-dc2294 .nav-in-dc22f8{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-dc2294 .nav-in-dc22f8{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-dc22b3{display:flex;align-items:center;gap:12px}
.nav-below-dc22b3 .nav-genres-dc2221{padding:0;flex:1 1 auto;min-width:0}
.nav-below-dc22b3 .nav-search-dc223d{margin-left:auto;flex:0 0 auto}
.nav-dc22c3[data-spos="below"] .nav-below-dc22b3 .nav-search-dc223d input[type=search]{width:clamp(180px,22vw,260px)}
.nav-search-dc223d input[type=search]{padding:10px 14px}
.nav-genres-dc2221::before{color:var(--accent)}
/* 본문의 "다른 장르" 줄은 위에 제목이 있으니 라벨을 또 달지 않는다 */
.blk-dc2257 .nav-genres-dc2221::before{display:none}

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

/* 요약 수치 4칸 — 숫자를 크게, 설명은 작게 */
.two-dc2212:has(> .person-dc2242){grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.two-dc2212 > .person-dc2242{padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.two-dc2212 > .person-dc2242 b{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em;color:var(--text)}
.two-dc2212 > .person-dc2242 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-dc2257{padding:var(--sec-y) 0}
.sec-head-dc2275{margin-bottom:var(--sp-4);gap:var(--sp-2) var(--sp-3)}
.sec-head-dc2275 + .prose-dc220d{margin-top:0}
.prose-dc220d{margin-bottom:0}
.hero-in-dc22ef{padding-top:var(--hero-y);padding-bottom:var(--hero-y)}
.statbar-in-dc222f{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
.grid-dc22c0{gap:var(--gap)}
/* 컨트롤 — 높이·모서리·글자를 하나로 */
.btn-dc22dd,.chip-dc2282,.nav-genre-dc2249,.nav-search-dc223d 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-dc2282,.nav-genre-dc2249{font-size:var(--t-sm);font-weight:700;padding:0 var(--sp-3)}
.nav-search-dc223d input[type=search],.page-search-dc22ac input[type=search]{min-height:var(--ctl-h);border-radius:var(--ctl-r);
  font-size:var(--t-ui);padding:0 var(--sp-4)}
.fact-dc22da{border-radius:var(--ctl-r);font-size:var(--t-sm);padding:var(--sp-1) var(--sp-3)}
.brand-dc2258{min-height:var(--ctl-h)}
.foot-links-dc2242{gap:var(--sp-2) var(--sp-5)}
.foot-links-dc2242 a{display:inline-flex;align-items:center;min-height:var(--ctl-h)}
.hero-cta-dc2240,.ad-btns-dc22c2{gap:var(--sp-3)}
.hero-cta-dc2240{margin-top:var(--sp-5)}
body.nav-float-dc2294 .nav-in-dc22f8,.hero-dc22fa .eyebrow-dc224f,.score-dc22d9,.sec-head-dc2275 .more-dc2214,.card-dc22d8 .y-dc225f .gc-dc22fc,.nav-genre-dc2249,.chip-dc2282{border-radius:var(--ctl-r)}
.hero-dc22fa .prose-dc220d{font-size:var(--t-body);color:var(--text-2);margin-top:var(--sp-3);white-space:normal}
.detail-in-dc2261 .prose-dc220d{font-size:var(--t-body);margin-top:var(--sp-4)}
/* 검색 페이지 */
.section-dc2225{padding:var(--sec-y) 0 var(--sp-6)}
.section-dc2225 .eyebrow-dc224f{display:block;font-size:var(--t-cap);font-weight:800;letter-spacing:.1em;color:var(--accent);margin:0 0 var(--sp-2)}
.section-dc2225 h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.03em}
.page-search-dc22ac{margin:var(--sp-4) 0 var(--sp-3)}
.page-search-dc22ac input[type=search]{min-height:48px;font-size:16px;max-width:560px;width:100%}
.section-dc2225 > .wrap-dc2237 > .small-dc22e0{font-size:var(--t-sm);margin:0 0 var(--sp-4)}
/* ⚠ .ph-dc22d2 는 <span> 이라 기본이 inline 이다. inline 에서는 aspect-ratio 가 무시되어
   포스터 높이가 이미지 로딩 상태·원본 비율에 따라 제멋대로(세로로 길게) 늘어났다 → block 으로 고정 */
.card-dc22d8 .ph-dc22d2{display:block;width:100%}
body.cards-wide-dc2282 .card-dc22d8 .ph-dc22d2{width:104px}
body.cards-rank-dc2204 .card-dc22d8 .ph-dc22d2{width:52px}
/* 포스터를 따로 보여 주지 않는 히어로(center·minimal) — 포스터/백드롭을 **배경**으로 깔아 빈 느낌을 없앤다 */
body.hero-center-dc22d9 .hero-in-dc22ef,body.hero-minimal-dc223c .hero-in-dc22ef{position:relative}
body.hero-center-dc22d9 .hero-bg-dc22cc,body.hero-minimal-dc223c .hero-bg-dc22cc{position:absolute;inset:0;background-size:cover;background-position:center 22%;opacity:.7;filter:saturate(1.1)}
body.hero-center-dc22d9 .hero-dc22fa::after,body.hero-minimal-dc223c .hero-dc22fa::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-dc22fb .hero-in-dc22ef,body.hero-center-dc22d9 .hero-in-dc22ef,body.hero-minimal-dc223c .hero-in-dc22ef{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-dc22fb .hero-in-dc22ef .btn-dc22dd,body.hero-center-dc22d9 .hero-in-dc22ef .btn-dc22dd,body.hero-minimal-dc223c .hero-in-dc22ef .btn-dc22dd{text-shadow:none}
body.hero-poster-dc22fb .hero-dc22fa h1,body.hero-center-dc22d9 .hero-dc22fa h1,body.hero-minimal-dc223c .hero-dc22fa h1{-webkit-text-fill-color:currentcolor}
body.hero-center-dc22d9 .hero-in-dc22ef>*,body.hero-minimal-dc223c .hero-in-dc22ef>*{position:relative;z-index:1}
/* 카드 안쪽 */
.card-dc22d8 .bd-dc22c4{padding:var(--sp-3) var(--sp-3) var(--sp-4);gap:var(--sp-1)}
body.cards-wide-dc2282 .card-dc22d8 .bd-dc22c4{padding:var(--sp-3) var(--sp-4);gap:var(--sp-2)}
.card-dc22d8 .y-dc225f{margin-top:var(--sp-1);gap:var(--sp-2)}
.card-dc22d8 .y-dc225f .gc-dc22fc{font-size:var(--t-cap);padding:1px var(--sp-2)}
.score-dc22d9{font-size:var(--t-cap);padding:var(--sp-1) var(--sp-2)}
/* 본문 글줄 */
.prose-dc220d{line-height:var(--lh-body)}
.facts-dc22b5{gap:var(--sp-2);margin-top:var(--sp-4)}
.detail-in-dc2261 .facts-dc22b5{margin-top:var(--sp-4)}
.person-dc2242{padding:var(--sp-3) var(--sp-4)}
.people-dc22fd{gap:var(--sp-2)}

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

/* ── 반응형 — 중단점을 단계별로 나눈다 ──
   1200(작은 데스크톱) · 900(태블릿) · 640(큰 폰) · 480(작은 폰)
   단계를 나눠 두면 "어느 폭에서 왜 깨지는지"를 추적하기 쉽다. */
@media (max-width:1200px){
  /* 작은 데스크톱 — 카드가 과하게 커지지 않게 */
  .grid-dc22c0{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
}
@media (max-width:900px){
  /* 태블릿 — 2단(히어로·상세·feature)을 1단으로 내린다 */
  body.hero-split-dc22c1 .hero-grid-dc222b,body.hero-mirror-dc223a .hero-grid-dc222b{grid-template-columns:1fr}
  body.hero-split-dc22c1 .hero-art-dc22af,body.hero-mirror-dc223a .hero-art-dc22af{justify-self:start;max-width:200px}
  /* 좁으면 반전이 의미가 없다 — 포스터를 위로 올려 글보다 먼저 보이게 한다 */
  body.hero-mirror-dc223a .hero-art-dc22af{order:-1}
  body.hero-band-dc2268 .hero-art-dc22af{aspect-ratio:16/9}
  .detail-in-dc2261{grid-template-columns:1fr}
  .detail-in-dc2261 .art-dc22a3{max-width:156px;margin:0}
  .feature-split-dc22a1{grid-template-columns:1fr !important;gap:16px}
  .two-dc2212{grid-template-columns:1fr !important}
  footer.site-dc22ee[data-layout="cols"] .foot-cols-dc22d2{grid-template-columns:1fr;gap:14px}
}
@media (max-width:640px){
  /* ── 모바일 네비 — 위치 설정과 무관하게 **2줄로 고정** ──
     data-gpos / data-spos 조합에 따라 검색·장르가 각각 별도 줄을 차지해
     상단이 240px 까지 높아졌다(모바일에서 화면 1/3).
     1줄: 브랜드 + 메뉴(검색 포함), 2줄: 장르(가로 스크롤).
     검색 폼은 nav-links **안에** 들어가는 경우가 있어 그쪽 규칙도 함께 둔다. */
  .nav-in-dc22f8{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-dc22f8 .menuBtn-dc22d8{grid-column:1;grid-row:1;margin-right:0}
  .nav-in-dc22f8 .brand-dc2258{grid-column:2;grid-row:1;min-width:0}
  .nav-in-dc22f8 .nav-links-dc2229{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-dc22f8 .nav-links-dc2229::-webkit-scrollbar{display:none}
  .nav-in-dc22f8 .nav-links-dc2229 .nav-search-dc223d{margin-left:0;flex:0 0 auto;width:auto}
  .nav-in-dc22f8 > .nav-search-dc223d{grid-column:3;grid-row:1;width:auto;margin-left:0;
    justify-content:flex-end;flex-wrap:nowrap}
  .nav-in-dc22f8 .nav-search-dc223d input[type=search]{width:clamp(72px,24vw,120px);padding:7px 9px;font-size:13px}
  .nav-in-dc22f8 .nav-search-dc223d button{padding:7px 10px;font-size:13px}

  /* ── 검색은 아이콘으로 접고, 누르면(포커스) 펼친다 ──
     상단에서 검색이 차지하던 한 줄을 없앤다. 버튼이 없어도 폼 안에서 Enter 로 전송된다.
     nav-below 에 홀로 있는 경우에는 **오른쪽 위로 띄워** 줄 자체를 없앤다. */
  .nav-dc22c3,.nav-dc22c3:has(> .nav-below-dc22b3:not(:empty)){position:relative;top:0}
  .nav-dc22c3 > .nav-below-dc22b3{min-height:0}
  /* ⚠ 뒤에 오는 width:auto 규칙들(nav-below·nav-links 안)이 이기므로 !important 로 고정한다 */
  .nav-search-dc223d{position:relative;flex:0 0 auto;width:40px !important;overflow:hidden;
    transition:width .18s ease;border-radius:22px}
  .nav-search-dc223d::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-dc223d input[type=search]{width:100% !important;padding:8px 10px;font-size:13px;
    text-indent:-9999px;cursor:pointer}
  .nav-search-dc223d button{display:none}
  .nav-search-dc223d:focus-within{width:min(210px,54vw) !important}
  .nav-search-dc223d:focus-within::before{display:none}
  .nav-search-dc223d:focus-within input[type=search]{text-indent:0;cursor:text}
  .nav-search-dc223d:focus-within button{display:inline-block;padding:8px 11px;font-size:13px}
  .nav-dc22c3 > .nav-below-dc22b3 .nav-search-dc223d{position:absolute;top:8px;right:16px;margin:0;z-index:6;padding:0}
  /* ⚠ .nav-dc22c3[data-gpos="brand"] .nav-genres-dc2221 가 명시도가 더 높아 wrap 을 되돌린다
     (그래서 장르 pill 이 여러 줄이 되어 상단이 200px 를 넘었다) → !important 로 고정한다. */
  .nav-in-dc22f8 .nav-genres-dc2221,.nav-dc22c3 > .nav-below-dc22b3 .nav-genres-dc2221{
    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-dc22f8 .nav-genres-dc2221::-webkit-scrollbar,.nav-dc22c3 > .nav-below-dc22b3 .nav-genres-dc2221::-webkit-scrollbar{display:none}
  /* ⚠ 위치 설정이 'below' 면 장르·검색이 **nav-in 밖**(nav-below)에 온다.
     여기서 한 줄 가로 스크롤로 묶지 않으면 장르 pill 이 여러 줄로 wrap 되어
     상단이 210px 까지 높아진다(실제로 그랬다). */
  .nav-dc22c3 > .nav-below-dc22b3{padding:0 16px 8px;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .nav-dc22c3 > .nav-below-dc22b3:empty{display:none}
  .nav-dc22c3 > .nav-below-dc22b3 .nav-genres-dc2221{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-dc22c3 > .nav-below-dc22b3 .nav-genres-dc2221::-webkit-scrollbar{display:none}
  .nav-dc22c3 > .nav-below-dc22b3 .nav-search-dc223d{margin:0;padding:0;width:auto;flex:0 0 auto;
    justify-content:flex-start;flex-wrap:nowrap}
  .nav-dc22c3 > .nav-below-dc22b3 .nav-search-dc223d input[type=search]{width:clamp(96px,40vw,180px);padding:7px 9px;font-size:13px}
  .nav-dc22c3 > .nav-below-dc22b3 .nav-search-dc223d button{padding:7px 11px;font-size:13px}

  .wrap-dc2237{padding-left:16px;padding-right:16px}
  .hero-in-dc22ef{padding-top:24px;padding-bottom:24px}
  .hero-dc22fa h1{font-size:clamp(24px,7.4vw,34px)}

  /* ── 모바일 히어로 재설계 ──
     'stack' 은 포스터가 **위에** 오는 구조라 좁은 화면에서 세로로 가장 길었다
     (포스터 + 중앙 정렬 글 → 첫 화면이 그것만으로 꽉 참).
     좁을 때는 포스터를 **배경으로 깔고** 글을 **왼쪽 정렬**해
     세로를 줄이고 첫 화면에 영화 카드가 보이게 한다. */
  body.hero-stack-dc2230 .hero-grid-dc222b{position:relative;display:block;text-align:left;gap:0}
  body.hero-stack-dc2230 .hero-art-dc22af{
    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-dc2230 .hero-art-dc22af img{object-position:center 20%}
  body.hero-stack-dc2230 .hero-grid-dc222b > *:not(.hero-art-dc22af){position:relative;z-index:1}
  body.hero-stack-dc2230 .hero-in-dc22ef{align-items:flex-start;text-align:left}
  body.hero-stack-dc2230 .hero-dc22fa .lead-dc22f8{margin-left:0;margin-right:0}
  body.hero-stack-dc2230 .hero-cta-dc2240{justify-content:flex-start}

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

  /* 상세 — 좁은 화면에서는 포스터를 **작게** 하고 정보를 위로 올린다.
     예전에는 260px 중앙 정렬이라 첫 화면이 포스터로만 찼다. */
  .detail-in-dc2261{gap:16px;padding:22px 0}
  .detail-in-dc2261 .art-dc22a3{max-width:176px;margin:0}
  .detail-in-dc2261 h1{font-size:clamp(21px,6.4vw,28px)}
  .detail-in-dc2261 .facts-dc22b5{margin-top:14px;gap:8px}
  .fact-dc22da{padding:4px 10px;font-size:12px}
  .rank-rows-dc22fc li a{gap:10px;padding:7px 8px}
  .strip-item-dc2233{flex:0 0 124px}
  .foot-in-dc2227{flex-direction:column;align-items:flex-start;gap:6px}
  footer.site-dc22ee[data-layout="center"] .foot-in-dc2227{align-items:center}
  .stats-dc22de,.facts-dc22b5{gap:8px}
}
@media (max-width:480px){
  /* 작은 폰 — 여백·타이포를 한 단계 더 줄인다 */
  .hero-dc22fa h1{font-size:clamp(23px,8.4vw,30px)}
  .grid-dc22c0{grid-template-columns:repeat(auto-fill,minmax(128px,1fr)) !important;gap:11px}
  .strip-item-dc2233{flex:0 0 108px}
  .stats-dc22de{grid-template-columns:1fr !important}
  .facts-dc22b5{gap:6px}
  .fact-dc22da{font-size:12px;padding:4px 10px}
  .foot-about-dc225c{padding:0 0 16px;margin:0 0 16px}
  footer.site-dc22ee{padding:28px 0 38px}
  .foot-links-dc2242{gap:12px;font-size:13px;padding:16px 0 0}
}
/* ── 데스크톱 상단 바 ── 윗줄(로고·장르·검색)만 따라온다. 아랫줄(장르·검색)은 스크롤하면 사라진다.
   ⚠ 예전에는 고정 높이(56~62px) 안에서 줄바꿈이 일어나 요소가 바깥으로 넘쳐 본문과 겹쳤다.
      → 높이는 내용에 맞추고, 장르는 줄바꿈 대신 가로 스크롤로 둔다. */
@media (min-width:641px){
  .nav-dc22c3{display:contents}
  body .nav-dc22c3[data-gpos] .nav-in-dc22f8{height:auto;flex-wrap:nowrap}
  .nav-in-dc22f8{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-dc2294 .nav-in-dc22f8{top:8px}
  body:not(.nav-float-dc2294) .nav-in-dc22f8{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-dc22f8 .brand-dc2258{flex:none}
  /* 남는 가로 공간은 **장르 목록**이 모두 쓴다. 메뉴·검색이 따로 같이 늘어나면 공간을 반반 나눠 가져 장르가 잘리고 오른쪽이 비었다 */
  .nav-in-dc22f8 .nav-links-dc2229{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-dc22f8 .nav-links-dc2229:has(.nav-genres-dc2221){flex:1 1 auto}
  .nav-dc22c3 .nav-in-dc22f8 .nav-genres-dc2221{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;padding:0;scrollbar-width:none;align-items:center}
  .nav-in-dc22f8 .nav-genres-dc2221::-webkit-scrollbar{display:none}
  .nav-in-dc22f8 .nav-search-dc223d{flex:none}
  .nav-below-dc22b3{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-dc2230 .hero-art-dc22af{display:none}
  /* 상세 — 포스터를 작게 옆으로 붙이고 제목·평점을 먼저 보여준다. 줄거리·출연은 전체 폭 */
  .detail-in-dc2261{grid-template-columns:104px minmax(0,1fr);gap:var(--sp-2) var(--sp-4)}
  .detail-in-dc2261 > div:not(.art-dc22a3){display:contents}
  .detail-in-dc2261 .art-dc22a3{grid-row:1 / span 3;max-width:none;width:100%}
  .detail-in-dc2261 h1,.detail-in-dc2261 .tag-dc2256,.detail-in-dc2261 .facts-dc22b5{grid-column:2}
  .detail-in-dc2261 h1{align-self:end;font-size:clamp(20px,6vw,26px)}
  .detail-in-dc2261 .tag-dc2256{margin-top:0}
  .detail-in-dc2261 .facts-dc22b5{margin-top:0;align-self:start}
  .detail-in-dc2261 > div > *:not(h1):not(.tag-dc2256):not(.facts-dc22b5){grid-column:1 / -1}
  .detail-in-dc2261 .ad-btns-dc22c2{margin-top:var(--sp-3)}
}
@media (max-width:900px){
  .two-dc2212:has(> .person-dc2242){grid-template-columns:repeat(2,1fr) !important}
}
/* 장르 줄 안쪽 여백은 위아래 같게 — 예전에는 10px/14px 이라 버튼이 바 안에서 아래로 치우쳤다 */
.nav-in-dc22f8 .nav-genres-dc2221,.nav-below-dc22b3 .nav-genres-dc2221{padding-top:0;padding-bottom:0}
.nav-in-dc22f8{align-items:center}
/* ── 햄버거 메뉴를 열었을 때 ──
   스크립트가 메뉴(.nav-links-dc2229)를 세로로 펼친다. 예전에는 한 줄짜리 격자 칸에 그대로 들어가
   검색 버튼이 어긋나게 아래로 떨어졌다. → 바 아래 **전체 폭 패널**로 펼치고,
   장르는 줄바꿈, 검색창은 한 줄 가득, 버튼도 보이게 한다. */
@media (max-width:720px){
  body .nav-dc22c3.navOpen-dc2205 .nav-in-dc22f8{flex-wrap:wrap;align-items:center;row-gap:var(--sp-2)}
  body .nav-dc22c3.navOpen-dc2205 .nav-in-dc22f8{height:auto !important;border-radius:var(--radius);padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
  .nav-dc22c3.navOpen-dc2205 .nav-in-dc22f8 > .nav-genres-dc2221{flex-wrap:wrap !important;overflow:visible}
  .nav-dc22c3.navOpen-dc2205 .nav-in-dc22f8 .nav-links-dc2229{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-dc22c3.navOpen-dc2205 .nav-in-dc22f8 .nav-links-dc2229 > a{padding:0 var(--sp-3);min-height:var(--ctl-h);display:flex;align-items:center}
  .nav-dc22c3.navOpen-dc2205 .nav-in-dc22f8 .nav-links-dc2229 .nav-genres-dc2221,.nav-dc22c3.navOpen-dc2205 .nav-below-dc22b3 .nav-genres-dc2221{flex-wrap:wrap !important;overflow:visible;padding:0}
  .nav-dc22c3.navOpen-dc2205 .nav-search-dc223d{width:100% !important;overflow:visible;display:flex;flex:1 1 auto;gap:var(--sp-2);margin:0}
  .nav-dc22c3.navOpen-dc2205 .nav-search-dc223d::before{display:none}
  .nav-dc22c3.navOpen-dc2205 .nav-search-dc223d 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-dc22c3.navOpen-dc2205 .nav-search-dc223d button{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}