/* ============================================================================
   /work 상세 케이스 조판 (case.css) — JANG 템플릿 파일럿 · 디벨롭 2회차 (2026-08-04)
   프리픽스 cs- · 지면 전면 검정 (2026-08-03 Seal 확정 — "사이트 전체 배경 검정")

   ── 1회차 근거 = specs/2026-08-03-case-reference-study.md ──
   필름 히어로(risk.film) · 크레딧(glitchandgrit·offbeat) · 라벨드 무브먼트(locomotive) ·
   에피소드 번호 = 실제 4부작의 구조 · 교차 리듬 = 승인된 /work 목록(B안)과 같은 리듬.

   ── 2회차 = Seal 지적 8건 (경위는 work-jang-v2.html 머리 주석) ──
   · 개요: 세로 레일·로고를 버리고 "스탠드퍼스트 → 헤어라인 크레딧 스트립" 으로.
     좌우 밸런스 문제를 비대칭 2열 자체를 버려서 구조적으로 없앴다
   · 기획(Planning) 신설: 이 면의 본체. 실제 기획서 스프레드 3장을 큰 판형 스택으로
   · 인용: 브레스+초상의 이미지 3연속을 "풀블리드 한 장 위 오버레이" 로 통합
   · 에피소드: 미디어 4:7 격상 + 중앙 플레이 — 시청이 이 면의 종착
   · 시네 라이트박스: 인페이지 재생. 크롬은 우리 토큰, 장치는 YSK cine 승계(site.js §8)
   ============================================================================ */

/* ══ 지면 — body 한 곳에서만 칠한다 (겹침 조판에서 섹션 배경은 앞을 덮는다) ══
   ⚠ work.css 의 같은 규칙과 중복이다. 전 사이트 검정 전환 라운드에서
   site.css 로 올리고 양쪽에서 지운다. */
/* 지면 검정은 site.css 로 올라갔다 (2026-08-05) */

/* ══ 공통 틀 ══════════════════════════════════════════════════════ */
.cs-in{max-width:1280px;margin-inline:auto;padding-inline:5vw}
.cs-kick{font-family:var(--body-en);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;color:var(--accent)}

/* ══ 0. 히어로 — 필름이 무게를 진다 (1회차 승인 · 유지) ═══════════════ */
.cs-hero{position:relative;height:100svh;min-height:600px;overflow:hidden;
  display:flex;align-items:flex-end}
.cs-hero__stage{position:absolute;inset:0;z-index:0;will-change:transform,opacity}
.cs-hero__stage video{width:100%;height:100%;object-fit:cover}
.cs-hero__stage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.28) 34%,transparent 62%)}
.cs-hero__cap{position:relative;z-index:2;width:100%;
  padding:0 5vw clamp(40px,7vh,72px);will-change:transform,opacity}
.cs-hero__cap .cs-kick{text-shadow:0 1px 12px rgba(0,0,0,.6)}
.cs-hero__t{margin-top:14px;font-family:var(--display-en);font-weight:400;
  text-transform:uppercase;color:var(--ink);
  font-size:clamp(88px,15vw,236px);line-height:.88;letter-spacing:-.005em;
  text-shadow:0 4px 40px rgba(0,0,0,.55)}
.cs-hero__t small{display:block;font-size:clamp(22px,3.1vw,48px);line-height:1.12;
  letter-spacing:.045em;margin-top:.12em;color:var(--ink)}
.cs-hero__sub{margin-top:18px;font-family:var(--body-ko);
  font-size:clamp(14px,1.2vw,18px);line-height:1.7;color:rgba(255,255,255,.9);
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
/* 한글 제목 면(총각네) — Anton 스택엔 한글이 없다. 얼굴을 명시한다 */
.cs-hero__t.is-ko{font-family:var(--title-ko);font-weight:700;
  font-size:clamp(40px,7.4vw,118px);line-height:1.16;letter-spacing:-.025em}

/* ══ 1. 개요 — 스탠드퍼스트가 열고, 크레딧은 헤어라인 스트립 한 줄 ═════
   2회차: 세로 레일(로고+표)이 우측 큰 한글과 밸런스가 안 맞았다.
   비대칭 2열을 버리고 위→아래 한 흐름으로: 큰 서술 → 보조 문단 → 사실 한 줄.
   크레딧이 얇은 스트립으로 눕자 로고가 설 자리 자체가 없어졌다(삭제 지시와 일치). */
.cs-credit{padding-block:clamp(80px,13vh,140px)}
.cs-stand{font-family:var(--title-ko);font-weight:500;max-width:23em;
  font-size:clamp(22px,2.7vw,38px);line-height:1.6;letter-spacing:-.015em;color:var(--ink)}
.cs-about{margin-top:26px;font-family:var(--body-ko);
  font-size:clamp(14.5px,1.1vw,16px);line-height:1.9;color:var(--dim);max-width:52ch}
/* 행 수는 프로젝트마다 다르다(3~4) — auto-fit 이 받는다 */
.cs-strip{margin-top:clamp(44px,7vh,72px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid #262626;border-bottom:1px solid #262626}
.cs-strip > div{padding:18px 22px 18px 0}
.cs-strip > div + div{border-left:1px solid #1E1E1E;padding-left:22px}
.cs-strip dt{font-family:var(--body-en);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--dim)}
.cs-strip dd{margin-top:8px;font-family:var(--body-ko);font-size:14.5px;
  line-height:1.6;color:#E4E4E4}

/* ══ 2·5. 관점 / 방법 — 미디어 반면 교차 (1회차 승인 · 유지) ═══════════ */
.cs-half{padding-block:clamp(56px,9vh,104px)}
.cs-half .cs-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,5vw,84px);align-items:center}
.cs-half.flip .cs-in > .cs-half__body{order:2}
.cs-half.flip .cs-in > .cs-half__media{order:1}
.cs-half__media{overflow:hidden}
.cs-half__media img,.cs-half__media video{width:100%;height:auto;display:block}
/* 한글 섹션 제목(막·장 제목) — 얼굴을 명시한다 */
.cs-half__body h2.is-ko{font-family:var(--title-ko);font-weight:700;
  letter-spacing:-.02em;line-height:1.22;font-size:clamp(26px,3.4vw,46px)}
/* ★`text-wrap:balance` (2026-08-06) — 이 제목은 **좁은 칸**(5fr 중 약 484px)에 서는데
   62px 라 두세 낱말만 넘어가도 줄이 [396 · 118] 처럼 갈린다(`One Salary, a Whole System Runs`).
   낱말을 바꾸거나 크기를 내리는 대신 **줄 나누기를 브라우저에 맡긴다** — 두 줄이 고르게 선다.
   ⚠ 이미 `<br>` 로 못박은 제목은 그대로다. 저절로 접히는 자리에만 걸린다.
   ⚠ 한 줄에 들어가는 제목은 아무 영향이 없다. */
.cs-half__body h2{margin:16px 0 22px;font-family:var(--display-en);font-weight:400;
  text-transform:uppercase;font-size:clamp(34px,4.4vw,62px);line-height:1;color:var(--ink);
  text-wrap:balance}
.cs-half__body p{font-family:var(--body-ko);font-size:clamp(15px,1.12vw,16.5px);
  line-height:1.92;color:#CFCFCF;max-width:56ch}
.cs-half__body p + p{margin-top:16px}

/* ══ 3. 기획 — 이 면의 본체 ═══════════════════════════════════════
   목적은 완성본 소개가 아니라 어프로치·기획·시각(2026-08-04 Seal).
   실제 기획서(13장) 스프레드 3장을 큰 판형으로 쌓는다 — 검정 지면 위에서
   크림색 종이가 인화지처럼 뜬다. 서술은 전부 기획서에 있는 사실이다. */
.cs-plan{padding-block:clamp(72px,12vh,132px)}
.cs-plan__head{max-width:840px}
/* ══ 풀폭 미디어 위 2단 헤더 ═══════════════════════════════════════
   텍스트를 왼쪽에만 뭉치지 않는다(2026-08-04 Seal: "이미지 박스 크기에 따라 배치를
   생각하라"). 넓은 미디어에는 넓은 헤더 행 — 제목은 왼쪽, 서술은 오른쪽. */
.cs-head2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,5vw,84px);align-items:start}
.cs-plan__head.cs-head2{max-width:none}
.cs-big .cs-in > .cs-head2,.cs-compare .cs-in > .cs-head2{margin-bottom:clamp(26px,4vh,44px)}
.cs-plan__head h2{margin:16px 0 26px;font-family:var(--display-en);font-weight:400;
  text-transform:uppercase;font-size:clamp(34px,4.4vw,62px);line-height:1;color:var(--ink)}
/* 속담 — 기획서가 이 문장으로 시작한다. 장식 없이, 본문과 다른 결만 */
.cs-plan__prov{margin:26px 0 0}
.cs-plan__prov p{font-family:var(--title-ko);font-weight:500;
  font-size:clamp(18px,1.9vw,27px);line-height:1.6;letter-spacing:-.01em;color:#EDEDED}
.cs-plan__prov span{display:block;margin-top:10px;font-family:var(--body-ko);
  font-size:12.5px;letter-spacing:.04em;color:var(--dim)}
.cs-plan__lead{font-family:var(--body-ko);font-size:clamp(15px,1.12vw,16.5px);
  line-height:1.92;color:#CFCFCF;max-width:58ch}
.cs-plan__lead + .cs-plan__lead{margin-top:16px}
/* 덱 스프레드 — 큰 판형 세로 스택. 종이라서 그림자를 준다(지면과 분리) */
.cs-plan__decks{margin-top:clamp(48px,8vh,88px);display:grid;gap:clamp(44px,7vh,80px)}
/* 세로형 문서 페이지(트리트먼트 등)는 두 장을 나란히 세운다 */
.cs-plan__decks.cols2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(24px,3vw,44px);align-items:start}
/* 기획 원문 발췌 — 질문지·헤드라인. 장식 없이 헤어라인 목록으로 */
.cs-plan__qs{margin-top:34px;max-width:640px;list-style:none}
.cs-plan__qs li{padding:12px 0;border-top:1px solid #232323;
  font-family:var(--body-ko);font-size:14.5px;line-height:1.7;color:#C8C8C8}
.cs-plan__qs li:last-child{border-bottom:1px solid #232323}
.cs-plan__qs li b{color:var(--accent);font-weight:700;margin-right:10px;font-family:var(--body-en);font-size:12px}
.cs-plan__decks figure{margin:0}
.cs-plan__decks img{width:100%;height:auto;
  box-shadow:0 10px 28px rgba(0,0,0,.5),0 30px 80px rgba(0,0,0,.45)}
.cs-plan__decks figcaption{margin-top:14px;font-family:var(--body-ko);
  font-size:13px;line-height:1.6;color:var(--dim)}
.cs-plan__decks figcaption b{color:#E4E4E4;font-weight:700;margin-right:12px}

/* ══ 4. 목소리 — 작품 속 사람. 화자가 실제로 있는 장면 위에 얹는다 ═════
   2회차: 브레스(장독대) + 초상 + How 미디어가 이미지 3연속을 만들었다.
   풀블리드 한 장으로 합치고 인용을 그 위에 — 이미지가 줄고 장면과 목소리가 붙는다.
   패럴랙스 여유분은 목록과 같은 118% / -9%. 글이 앉는 하단만 어둡게. */
.cs-voice{position:relative;height:min(94svh,860px);overflow:hidden;
  display:flex;align-items:flex-end}
/* 인용 없는 순수 브레스(글 없는 풀블리드 한 장) — 스크림을 걷는다 */
.cs-voice.no-cap{height:min(78svh,700px)}
.cs-voice.no-cap::after{background:none}
/* ⚠ 빌드가 `<img>` 를 `<picture>` 로 감싸므로 직계(`>`)가 한 칸 깊어진다.
   **짝을 같이 적어 둔다** — 안 적으면 배포본에서만 조용히 안 걸린다(소스는 멀쩡하다).
   실제로 이 규칙이 안 걸려 풀블리드 인터뷰 판이 `absolute 1440` → `static 774` 로
   반토막 났다(작품 넷). `picture{display:contents}`(site.css)는 상자만 없애지
   **선택자 매칭은 못 고친다.** */
.cs-voice > img,
.cs-voice > picture > img{position:absolute;left:0;top:-9%;width:100%;height:118%;
  object-fit:cover;will-change:transform}
.cs-voice::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.3) 44%,transparent 72%)}
.cs-voice__cap{position:relative;z-index:2;margin:0;width:100%;
  padding:0 5vw clamp(44px,8vh,80px)}
.cs-voice__cap blockquote{border-left:2px solid var(--accent);
  padding-left:clamp(20px,2.4vw,36px);max-width:760px}
.cs-voice__cap blockquote p{font-family:var(--title-ko);font-weight:500;
  font-size:clamp(22px,2.9vw,42px);line-height:1.58;letter-spacing:-.015em;color:var(--ink);
  text-shadow:0 2px 22px rgba(0,0,0,.55)}
.cs-voice__cap figcaption{margin-top:18px;padding-left:clamp(22px,2.6vw,38px);
  font-family:var(--body-ko);font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.cs-voice__cap figcaption b{display:block;color:var(--ink);font-size:14.5px;font-weight:700}

/* ══ 6. 시리즈 — 동일 비중의 균등 그리드. 시청이 이 면의 종착이다 ═══════
   3회차: "1·2·3·4편의 비중을 동일하게" → 교차 스택을 버리고 카드 그리드로.
   ★개수 무관 그리드다(auto-fit) — 프로젝트 유형별 변주를 같은 모듈이 받는다:
     · JANG: 에피소드 4 → 2×2
     · 단편 1편짜리: 카드 1 → 풀폭
     · 풀영상 + 쇼츠 / 브랜드필름 + 스케치필름: 카드 2~3 → 한 줄
   러닝타임은 표기하지 않는다(3회차 지시). 시청은 시네 라이트박스가 받는다. */
.cs-series{padding-block:clamp(72px,12vh,132px)}
.cs-series__head{text-align:center;margin-bottom:clamp(40px,7vh,72px)}
.cs-series__grid{display:grid;gap:clamp(44px,7vh,80px) clamp(24px,3.5vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}
/* 3편짜리(다큐+스케치 등)는 세 칸이 한 줄에 서야 비중이 같다 */
.cs-series__grid.cols3{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.cs-epc__body{margin-top:18px}
.cs-ep__meta{font-family:var(--body-en);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.cs-epc__body h3{margin:10px 0 14px;font-family:var(--display-en);font-weight:400;
  text-transform:uppercase;font-size:clamp(24px,2.2vw,32px);line-height:1.06;color:var(--ink)}
.cs-epc__body h3.is-ko{font-family:var(--title-ko);font-weight:700;
  letter-spacing:-.02em;line-height:1.25;text-transform:none}
.cs-epc__body p{font-family:var(--body-ko);font-size:15.5px;
  line-height:1.85;color:#CFCFCF}
/* 미디어 전체가 재생 버튼이다 */
.cs-ep__media{position:relative;display:block;overflow:hidden;text-decoration:none;cursor:pointer}
.cs-ep__media img{width:100%;height:auto}
.cs-ep__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.58),transparent 40%);
  opacity:.9;transition:opacity .5s ease}
.cs-ep__media[data-cine]:hover::after,.cs-ep__media[data-cine]:focus-visible::after{opacity:.55}
/* 재생물이 아직 없는 카드(div) — 어포던스 없이 고요히 선다. Vimeo 가 오면 a[data-cine] 로 바꾼다 */
div.cs-ep__media{cursor:default}
/* 중앙 플레이 — 원 하나, 과장 없이. 호버에서 강조색이 올라온다 */
.cs-ep__media .go{position:absolute;left:50%;top:50%;z-index:2;
  width:clamp(58px,6vw,84px);aspect-ratio:1;margin:0;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.38);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:border-color .35s,background .35s,transform .35s}
.cs-ep__media .go::before{content:"";display:block;margin-left:12%;
  width:26%;aspect-ratio:.9;clip-path:polygon(0 0,100% 50%,0 100%);background:var(--ink)}
.cs-ep__media:hover .go,.cs-ep__media:focus-visible .go{
  border-color:var(--accent);background:rgba(0,0,0,.55);transform:translate(-50%,-50%) scale(1.06)}
.cs-ep__media .play{position:absolute;left:18px;bottom:16px;z-index:2;
  font-family:var(--body-en);font-size:10.5px;letter-spacing:.2em;font-weight:700;
  text-transform:uppercase;color:var(--ink)}

/* ══ 스테이지 — 풀영상이 주인공, 쇼츠는 모서리의 티저 ═══════════════
   YSK fstage 문법 승계(2026-08-04 Seal 지목: finally-us 의 풀영상/프리뷰 처리).
   큰 포스터가 상영 판이고, 티저는 그 우하단 모서리에 겹쳐 앉는 작은 카드다.
   위계가 판형으로 보인다. 티저가 아래로 튀어나오는 만큼 섹션이 자리를 내준다. */
.cs-stage{position:relative;width:min(1080px,84vw);margin-inline:auto}
.cs-stage > .cs-ep__media{box-shadow:0 40px 110px rgba(0,0,0,.55)}
.cs-stage--teased{margin-bottom:clamp(60px,5.6vw,92px)}
/* 쇼츠 티저 — YSK 티저 실물 그대로: 어두운 판 + 상단 강조 헤어라인 + 두툼한 라벨 바.
   카드는 포스터 오른쪽·아래 모서리를 뚫고 나가 라벨 바가 지면 위에 앉는다.
   다른 장면이 돌고, SHORTS ▶ 바가 붙는 순간 PiP 로 읽히지 않는다. */
.cs-stage__shorts{position:absolute;right:clamp(-44px,-3vw,-20px);bottom:clamp(-58px,-3.8vw,-36px);
  width:min(280px,22vw);z-index:3;display:block;text-decoration:none;cursor:pointer;
  background:#121212;border:1px solid rgba(255,255,255,.07);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cs-stage__shorts::before{content:"";display:block;height:2px;background:var(--accent)}
.cs-stage__shorts:hover,.cs-stage__shorts:focus-visible{transform:translateY(-4px)}
.cs-stage__shorts .sframe{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0B0B0B}
.cs-stage__shorts .sframe.sq{aspect-ratio:1/1}
.cs-stage__shorts .sframe.tall{aspect-ratio:9/16}
.cs-stage__shorts.is-tall{width:min(200px,16vw);bottom:clamp(-64px,-4.2vw,-40px)}
.cs-stage__shorts video,.cs-stage__shorts img{width:100%;height:100%;object-fit:cover;display:block}
.cs-stage__shorts .smeta{display:flex;justify-content:space-between;align-items:center;
  padding:12px 15px;font-family:var(--body-en);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.82);transition:color .3s}
.cs-stage__shorts:hover .smeta{color:var(--ink)}
.cs-stage__shorts .smeta span:last-child{color:var(--accent);font-size:9px;letter-spacing:0}
.cs-stage__shorts:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 스테이지 아래 작은 카드 줄(커피킹덤 스케치 2편) — 위계는 판형이 만든다 */
.cs-stage + .cs-series__grid{margin-top:clamp(44px,6vh,68px)}

/* ══ 풀폭 미디어 피처 — 루프가 주인공인 설명 (그린망고 How) ═══════════ */
.cs-big{padding-block:clamp(56px,9vh,104px)}
.cs-big .cs-in > .cs-half__body{margin-bottom:clamp(26px,4vh,44px)}
.cs-big__media{overflow:hidden}
.cs-big__media video,.cs-big__media img{width:100%;height:auto;display:block}

/* ══ 전후 비교 — 같은 장면을 나란히 (총각네 엔딩: 원본 / AI 로고 교체) ══
   비교가 목적이라 모바일에서도 2열을 접지 않는다 */
.cs-compare{padding-block:clamp(56px,9vh,104px)}
.cs-compare .cs-in > .cs-half__body{margin-bottom:clamp(26px,4vh,44px)}
.cs-compare__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.cs-compare__grid figure{margin:0}
.cs-compare__grid video{width:100%;height:auto;display:block}
.cs-compare__grid figcaption{margin-top:10px;font-family:var(--body-en);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--dim)}
.cs-compare__grid figcaption b{color:var(--accent);margin-right:8px}

/* ══ 스틸 두 장 — 글 없는 반 브레스 ═══════════════════════════════ */
.cs-two{padding-block:clamp(24px,4vh,48px)}
.cs-two .cs-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
.cs-two img{width:100%;height:auto}

/* 시네 라이트박스 크롬은 `site.css` 로 올라갔다 (2026-08-05).
   `/film` 상세가 같은 재생툴을 쓰기 시작해서 공용 자리로 옮긴 것이다. */

/* ══ 진입 이펙트 — work.css 와 같은 YSK 토큰 (html.fx 는 site.js 가 건다) ══
   ⚠ 이 블록도 work.css 와 중복이다. 상세가 게이트를 통과하면
   [data-wipe]/[data-seq] 규칙을 site.css 로 올려 한 벌로 합친다. */
html.fx [data-wipe]{clip-path:inset(16% 0 0 0);transform:scale(.965);opacity:.001;
  transition:clip-path 1.15s cubic-bezier(.16,1,.3,1),
             transform 1.25s cubic-bezier(.16,1,.3,1),opacity .7s ease;
  will-change:clip-path,transform}
html.fx [data-wipe].in{clip-path:inset(0 0 0 0);transform:none;opacity:1}
html.fx [data-seq] > *{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .8s ease,transform .95s cubic-bezier(.16,1,.3,1),filter .8s ease}
html.fx [data-seq].in > *{opacity:1;transform:none;filter:blur(0)}
html.fx [data-seq].in > *:nth-child(1){transition-delay:.06s}
html.fx [data-seq].in > *:nth-child(2){transition-delay:.16s}
html.fx [data-seq].in > *:nth-child(3){transition-delay:.26s}
html.fx [data-seq].in > *:nth-child(4){transition-delay:.36s}
html.fx [data-seq].in > *:nth-child(5){transition-delay:.46s}

/* 키보드 초점 — 어두운 지면에서 강조색 실선 */
.cs-ep__media:focus-visible,.cine .cx:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}

/* ══ 모바일 ═══════════════════════════════════════════════════════ */
@media(max-width:860px){
  .cs-hero{min-height:520px}
  .cs-hero__t{font-size:clamp(64px,19vw,110px)}
  .cs-hero__t small{font-size:clamp(17px,4.6vw,26px);letter-spacing:.06em}
  .cs-hero__sub{font-size:14px}

  .cs-credit{padding-block:64px}
  .cs-stand{font-size:clamp(19px,5.6vw,24px)}
  /* 스트립은 2×2 로 접는다 — 세로 한 줄로 늘어놓으면 표가 아니라 목록이 된다 */
  .cs-strip{grid-template-columns:1fr 1fr}
  .cs-strip > div{padding:14px 12px 14px 0}
  .cs-strip > div + div{border-left:0;padding-left:0}
  .cs-strip > div:nth-child(even){border-left:1px solid #1E1E1E;padding-left:16px}
  .cs-strip > div:nth-child(n+3){border-top:1px solid #1E1E1E}

  .cs-head2{grid-template-columns:1fr;gap:14px}
  .cs-half .cs-in{grid-template-columns:1fr;gap:22px}
  .cs-half__media{order:1}
  .cs-half__body{order:2}
  .cs-half__body h2{font-size:clamp(30px,8.4vw,40px)}

  .cs-plan__head h2{font-size:clamp(30px,8.4vw,40px)}
  .cs-plan__decks{gap:36px}

  .cs-voice{height:min(72svh,640px)}
  .cs-voice__cap blockquote p{font-size:clamp(19px,5.4vw,26px)}

  .cs-series__grid{gap:44px}
  .cs-epc__body h3{font-size:clamp(23px,6.4vw,30px)}

  .cs-stage{width:100%}
  .cs-stage--teased{margin-bottom:0}
  /* 좁은 화면에서 겹침 티저는 잘린다 — 포스터 아래 우측 정렬 카드로 눕는다 */
  .cs-stage__shorts{position:static;width:56%;margin:12px 0 0 auto}
  .cs-stage__shorts.is-tall{width:42%}

  .cine .cwrap{width:94vw}
  .cine .clabel{left:4vw;max-width:76vw}
  .cine .cx{right:4vw}
}
@media(max-width:400px){
  .cs-hero__t{font-size:56px}
  .cs-strip dt{font-size:9.5px}
}

@media(prefers-reduced-motion:reduce){
  .cs-voice > img,
  .cs-voice > picture > img{top:0;height:100%;transform:none!important}
  .cine{transition:none}
}