/* ============================================================================
   /work 조판 (work.css) — B안 교차 리듬 · 지면 전면 검정

   ── 2026-08-03 Seal 확정 ────────────────────────────────────────────
   ① 히어로 = YSK `stories` 포토카드 모자이크 이식
      출처 `태국강의사업/site/src/stories-v1.html` §HERO (.hero/.hgrid/.pcard).
      가져온 것 = 12×10 격자 좌표 · 카드 프레임(흰 여백 + 그림자 두 겹) ·
                  가운데 띠를 제목 자리로 비우는 구성 · 스크롤 퇴장.
      바꾼 것 = 색(우리 토큰) · 서체(Anton). 갈래 B 그대로다.
   ② 목록 = **B안 교차 리듬.** A안(스캐터)을 실물로 보고 되돌렸다
      (*"막상 보니 별로다. 아까 b안 B 교차 리듬으로 다시 가보자."*)
   ③ 지면 = **전면 검정 하나로 통일** (*"배경은 그대로 일체감을 가져가는걸로 하고 검은색으로"*).
      히어로·멘트·목록이 전부 `--void` 다. 섹션마다 배경을 따로 칠하지 않는다 — 아래 ★참고.
   ④ 중간 멘트 복귀 — 카피는 Seal 이 직접 준 문장이다. 위아래 간격은 §멘트 주석 참고.
   ⑤ 모바일을 설계에 넣는다 (*"모바일 버전도 반드시 고려해서 디자인하고"*) — §모바일.

   ★★ 지면을 섹션에 칠하지 않는 이유 (2026-08-03에 실제로 낸 버그다)
      히어로 → 다음 섹션을 부드럽게 잇겠다고 다음 섹션에 `margin-top:-16svh` 를 줬는데,
      그 섹션이 **불투명 배경**을 갖고 있어서 **히어로 하단 130px 를 덮어 버렸다.**
      Seal 이 본 "히어로세션 하단이 잘렸다"가 이것이다. 카드는 넘치지 않았다 —
      실측으로 확인했다(카드 최하단 772 < 히어로 813). 덮인 것이지 잘린 게 아니었다.
      → **지면은 `body` 한 곳에서만 칠한다.** 섹션은 전부 투명이고, 겹쳐도 아무것도 안 가린다.
   ============================================================================ */

/* ══ 지면 — 여기 한 곳에서만 칠한다 ═══════════════════════════════ */
/* 지면 검정은 site.css 로 올라갔다 (2026-08-05) */
/* 섹션에 background 를 주지 않는다. 위 ★★ 참고 */

/* 푸터도 지면에 붙인다 (2026-08-03 Seal: *"푸터가 또 뜬다"*).
   site.css 의 기본 푸터는 `--ground`(#353535) 에서 시작해 검정으로 내려가는 그라디언트다.
   회색 지면 위에서는 그게 자연스러운 착지인데, **검은 지면 위에서는 위쪽 회색이 띠로 뜬다.**
   이 면에서는 통째로 `--void` 로 눕힌다 — 목록 끝과 푸터 사이에 경계가 없어야 한다.
   (site.css 에 같은 처리가 `.f--slab` 으로 이미 있다. 여기서는 클래스 없이 지면이 결정한다) */

/* ══ 히어로 — 포토카드 모자이크 ═══════════════════════════════════
   8칸 = 여덟 작품 1:1. 칸 모양에 맞춰 컷을 넣었다 */
.wk-hero{position:relative;height:100svh;min-height:640px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center}
.wk-stage{position:absolute;inset:0;z-index:0;will-change:transform,opacity}
.wk-grid{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(10,1fr);
  gap:clamp(10px,1.15vw,18px);padding:calc(82px + 1.5vh) 3.6vw 5vh}

.pcard{position:relative;display:block;background:var(--ink);
  padding:clamp(5px,.5vw,9px);border-radius:5px;
  box-shadow:0 2px 6px rgba(0,0,0,.45),0 18px 46px rgba(0,0,0,.5)}
.pcard .pm{position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:2px;background:#111}
.pcard video,.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 콜라주 좌표 — YSK 원본 그대로. 가운데 띠(4~6행)가 제목 자리다 */
.c1{grid-area:1/1/4/4}
.c2{grid-area:1/4/3/8;margin-top:10px}
.c3{grid-area:1/8/5/10}
.c4{grid-area:1/10/4/13;margin-top:-6px}
.c5{grid-area:4/1/9/3}
.c6{grid-area:8/3/11/6;margin-top:8px}
.c7{grid-area:7/6/11/10}
.c8{grid-area:6/10/11/13;margin-left:-4px}

.wk-cap{position:relative;z-index:3;padding-inline:5vw;will-change:transform,opacity}
.wk-h1{font-family:var(--display-en);font-size:clamp(44px,7.4vw,132px);font-weight:400;
  letter-spacing:-.01em;line-height:1;color:var(--ink);text-transform:uppercase;
  text-shadow:0 3px 34px rgba(0,0,0,.75)}
.wk-h1 em{font-style:normal;color:var(--accent)}
.wk-sub{margin-top:18px;font-family:var(--body-ko);
  font-size:clamp(13px,1.25vw,19px);line-height:1.7;letter-spacing:.01em;
  color:rgba(255,255,255,.92);max-width:46ch;margin-inline:auto;
  text-shadow:0 2px 18px rgba(0,0,0,.8)}
html[lang="en"] .wk-sub{font-family:var(--body-en)}

/* ══ 중간 멘트 — 히어로와 목록 사이의 숨 ═══════════════════════════
   카피는 Seal 이 준 문장 그대로다. 한 글자도 안 고쳤다.

   ★"텍스트 위아래 간격 잘 고려해서 스크롤링때 어색함없이" 를 이렇게 풀었다:
     · 높이를 **`min-height` 로만** 잡는다(고정 높이 아님) — 글이 길어져도 안 잘린다
     · 글은 `place-items:center` 로 **세로 가운데**. 위아래 여백이 늘 같다
     · 위아래에 `padding-block` 을 크게 둔다 → 앞뒤 섹션과 붙지 않는다
     · 높이를 `100svh` 가 아니라 **`86svh`** 로 둔 것이 핵심이다.
       한 화면을 꽉 채우면 스크롤 중에 "빈 화면 한 장"이 끼어 흐름이 끊긴다.
       86 이면 다음 작품의 머리가 살짝 보여서 **계속 내려가게** 된다
     · 제목과 본문 사이는 `1.2em` — 처음에 2.4em 으로 벌렸다가 *"너무 붕떠"* 로 반려됐다.
       본문이 제목의 **꼬리**로 읽혀야 하는 자리다. 따로 떼면 문장이 끊긴다        */
.wk-say{position:relative;min-height:86svh;display:grid;place-items:center;
  padding:16vh 6vw;text-align:center}
/* ⚠ 폭을 `ch` 로 잡지 않는다. `ch` 는 **그 요소 자신의 서체**를 기준으로 계산되는데
   이 래퍼의 서체는 본문 16px 이고 안의 제목은 50px 이다. `24ch` 로 뒀다가 통이 192px 이
   되어 제목이 두세 음절마다 끊겼다. 두 줄이 각각 한 줄로 서는 폭을 픽셀로 잡는다.
   (제목 12음절 × 약 .97em ≈ 580px @50px → 760 이면 여유가 있다) */
.wk-say .in{max-width:min(90vw,760px)}
.wk-say h2{font-family:var(--title-ko);font-weight:700;
  font-size:clamp(25px,3.5vw,52px);line-height:1.42;letter-spacing:-.025em}
html[lang="en"] .wk-say h2{font-family:var(--title-en);font-weight:400;line-height:1.2}
/* 강조는 둘째 줄에만. 지면이 검정이라 `--accent` 는 7.14:1 로 읽힌다 */
.wk-say h2 .r{color:var(--accent)}
 /* ⚠ 2.4em(=41px) 로 뒀다가 "너무 붕떠" 반려. 제목 덩이와 한 묶음으로 읽히게 조인다 */
.wk-say p{margin-top:1.2em;font-family:var(--body-ko);
  font-size:clamp(14px,1.15vw,18px);line-height:1.95;letter-spacing:.01em;
  color:var(--dim);max-width:min(90vw,460px);margin-inline:auto}
html[lang="en"] .wk-say p{font-family:var(--body-en)}

/* ══ 목록 = 격자 하나. 풀블리드는 두 칸을 다 쓴다 ═══════════════════
   ★"풀 그리드가 연속해서 두개가 나오는것까진 좋은데 사이에 간격이 없어. 간격 둬."
     → 섹션을 따로 쌓지 않고 **목록 전체를 한 격자로 묶었다.** `gap` 하나가
       풀블리드끼리 · 풀블리드와 작은 칸 · 작은 칸끼리를 전부 같은 값으로 벌린다.
       간격을 자리마다 손으로 주면 반드시 한 군데가 빠진다 — 실제로 빠졌던 자리다.
     ⚠ 가로 패딩은 0 이다. 풀블리드는 화면 끝까지 가야 한다.

   ★배치 순서 (2026-08-03 Seal 지정)
       CL System · 총각네      풀블리드 2연
       K-Pop · GreenMango      작은 칸 2
       JANG                    풀블리드
       Elephant World · Coffee Kingdom  작은 칸 2
       ABPON                   풀블리드
     풀블리드는 좌 · 우 · 좌 · 우 로 교차한다.
   ★이 구성을 **모바일에서도 그대로** 쓴다 (Seal 지시). 2열을 1열로 접지 않는다 —
     접으면 "풀블리드 / 작은 칸"의 대비가 사라져 리듬 자체가 없어진다.            */
.wk-list{--wgap:clamp(10px,1.15vw,18px);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--wgap);padding-block:var(--wgap)}
.wk-big{grid-column:1/-1}

/* ── 풀블리드 ─────────────────────────────────────────────────── */
.wk-big{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:calc(100svh * .86);overflow:hidden;isolation:isolate;
  padding:calc(100svh * .08) 5vw}
.wk-big .bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
/* 글이 있는 쪽만 어둡게. 글 없는 쪽은 영상을 가리지 않는다 — 홈에서 확립한 규칙 */
.wk-big .bg::after{content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.07) linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.24) 38%,transparent 62%)}
.wk-big.flip .bg::after{background:rgba(0,0,0,.07)
  linear-gradient(270deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.24) 38%,transparent 62%)}
.wk-big .logo{height:auto;object-fit:contain;align-self:flex-start;
  filter:drop-shadow(0 .05em .1em rgba(0,0,0,.4))}
.wk-big.flip .logo{align-self:flex-end}
/* 로고 없는 카드 — `space-between` 은 자식이 하나면 위로 붙인다. 글은 아래여야 한다 */
.wk-big.no-logo{justify-content:flex-end}
.wk-big .body{align-self:flex-start;max-width:430px;text-shadow:0 .05em .12em rgba(0,0,0,.45)}
.wk-big.flip .body{align-self:flex-end;text-align:right}
.wk-big .cr{font-family:var(--title-ko);font-size:12.8px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:1em}
html[lang="en"] .wk-big .cr{font-family:var(--title-en);letter-spacing:.2em}
.wk-big .t{font-family:var(--title-ko);font-size:2.5rem;line-height:1.15;font-weight:700;
  letter-spacing:-.01em;margin-bottom:.7em}
html[lang="en"] .wk-big .t{font-family:var(--title-en);font-weight:400;text-transform:uppercase}
.wk-big .d{font-family:var(--body-ko);font-size:1rem;line-height:1.55;max-width:360px;
  margin-bottom:2.4em}
html[lang="en"] .wk-big .d{font-family:var(--body-en)}
.wk-big.flip .d{margin-left:auto}

/* ── 작은 칸 ─────────────────────────────────────────────────── */
.wk-pair{position:relative;display:block;min-height:62svh;overflow:hidden;
  text-decoration:none;color:inherit;isolation:isolate}
.wk-pair .bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
/* ⚠ 처음에 `.78/.12` 로 뒀다가 ABPON 처럼 **바닥이 밝은 컷**에서 본문이 안 읽혔다.
   밝은 컷 기준으로 다시 잡았다 — 어두운 컷에서 과해 보이지 않는 선까지만 */
.wk-pair .bg::after{content:"";position:absolute;inset:0;transition:opacity .6s ease;
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.42) 46%,rgba(0,0,0,.06) 78%,transparent)}
/* 호버 — 전에는 미디어를 `scale(1.04)` 했는데 **패럴랙스가 같은 `transform` 을 쓴다.**
   둘이 부딪히면 한쪽이 죽는다. 그래서 호버는 스크림을 걷는 쪽으로 바꿨다 —
   누르면 그림이 더 보인다는 신호는 그대로고, 변형은 건드리지 않는다 */
.wk-pair:hover .bg::after,.wk-pair:focus-within .bg::after{opacity:.62}
.wk-pair .body{position:absolute;inset:auto 0 0 0;padding:5vh 2.4vw 4vh;
  text-shadow:0 .05em .12em rgba(0,0,0,.5)}
.wk-cat{font-family:var(--body-en);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--accent)}
.wk-pair .t{font-family:var(--title-ko);font-size:1.6rem;line-height:1.2;font-weight:700;
  letter-spacing:-.02em;margin-top:.4em}
html[lang="en"] .wk-pair .t{font-family:var(--title-en);font-weight:400;text-transform:uppercase}
/* `--dim`(#A3A3A3)을 쓰면 밝은 컷 위에서 사라진다 — 영상 위 본문은 흰 계열로 둔다 */
.wk-pair .d{font-family:var(--body-ko);font-size:.92rem;line-height:1.55;
  color:rgba(255,255,255,.86);margin-top:.6em;max-width:38ch}
html[lang="en"] .wk-pair .d{font-family:var(--body-en)}

/* ══ 배경 패럴랙스 — 스크롤에 반응하는 층 ═══════════════════════════
   ★"전체적으로 스크롤링을 할때의 재미가 없어" 에 대한 첫 번째 답이다.
     정지 화면 위를 지나가면 스크롤은 "이동"일 뿐이다. 배경이 **본문보다 느리게**
     흐르면 그때부터 깊이가 생긴다.
   미디어를 118% 로 키우고 위로 9% 올려 둔다 → 위아래로 ±9% 흘려도 빈 데가 안 생긴다.
   흘리는 일은 `site.js §6 [data-drift]` 가 한다(GSAP 있으면 GSAP, 없으면 rAF 한 바퀴). */
.wk-big .bg video,.wk-big .bg img,
.wk-pair .bg video,.wk-pair .bg img{
  position:absolute;left:0;top:-9%;width:100%;height:118%;
  object-fit:cover;will-change:transform}

/* ══ 진입 이펙트 ═══════════════════════════════════════════════════
   `html.fx` 는 `site.js §7` 이 **JS 가 살아 있을 때만** 건다. no-JS 에서는
   아무것도 숨지 않는다 — 콘텐츠가 갇히는 사고를 원천에서 막는 구조다.

   ① `[data-wipe]` 카드 — 아래에서 열리며 살짝 축소해 자리잡는다.
      `clip-path` 는 레이아웃을 안 건드려서 스크롤 중에 흔들림이 없다.
   ② `[data-seq]` 글 묶음 — 크레딧 → 제목 → 본문 → 버튼이 **차례로** 든다.
      한 덩이로 튀어나오는 것보다 읽는 순서가 생긴다.
   이징·거리·시간은 전부 YSK 승계 토큰이다(power4.out 계열 · y 22~34 · blur 8→0 · ~1s). */
/* ⚠ 확대(`scale(1.045)`)로 시작했다가 **가로 넘침**을 만들었다. 풀블리드는 이미 화면 폭이라
   1.045 를 곱하면 1440 → 1505 가 되어 가로 스크롤이 생긴다(실측으로 잡았다).
   **축소에서 제자리로** 들어오게 뒤집었다 — 넘칠 일이 없고, 카드가 프레임 안으로
   자리잡는 느낌이라 오히려 이 조판에 맞는다 */
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}

/* ══ CTA — 홈의 knockout 버튼 그대로 (승인된 값) ═══════════════════ */
.wk-cta{display:inline-block;font-family:var(--body-en);font-size:.68rem;
  letter-spacing:.14em;font-weight:600;text-transform:uppercase;text-decoration:none;
  color:var(--ink);padding:.75em 1.5em;border:1px solid var(--ink);
  mix-blend-mode:screen;
  background-image:linear-gradient(#fff,#fff);background-repeat:no-repeat;
  background-size:0% 100%;background-position:left center;
  transition:background-size .45s cubic-bezier(.16,1,.3,1),color .3s ease .08s,border-color .3s}
.wk-cta:hover{background-size:100% 100%;color:#000;border-color:#fff}

/* ══ 모바일 ═══════════════════════════════════════════════════════
   ★"이거 모바일에서도 이 구성 적용시켜줘" — **2열을 1열로 접지 않는다.**
     접으면 풀블리드와 작은 칸의 대비가 사라져 리듬 자체가 없어진다.
     대신 작은 칸의 조판을 좁은 폭에 맞게 다시 짠다(아래).                      */
@media(max-width:860px){
  /* 히어로 — YSK 와 같이 8칸 중 4칸만 남기고 2열로 */
  .wk-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(7,1fr);
    gap:9px;padding:76px 5vw 9vh}
  .c2,.c4,.c6,.c7{display:none}
  .c1{grid-area:1/1/3/2;margin:0}
  .c3{grid-area:1/2/4/3}
  .c5{grid-area:5/1/8/2}
  .c8{grid-area:6/2/8/3;margin:0}

  /* 중간 멘트 — 좁은 화면에서 `86svh` 는 글에 비해 넓어 "빈 화면"이 된다 */
  .wk-say{min-height:64svh;padding:14vh 7vw}
  .wk-say .in{max-width:100%}
  /* 390px 에서 좌우 7vw 를 빼면 안쪽이 336px 이다. 제목 첫 줄이 12음절이라
     한 음절이 27px 을 넘으면 줄이 끊긴다 → 6.2vw(=24.2@390) 로 캡을 씌워 한 줄을 지킨다 */
  .wk-say h2{font-size:clamp(21px,6.2vw,29px);line-height:1.5}
  .wk-say p{margin-top:1em;font-size:14.5px;line-height:1.85;max-width:30ch}

  /* 격자는 2열 그대로. 간격만 좁힌다 */
  .wk-list{--wgap:8px}

  /* 풀블리드 — 교차는 접는다. 좁은 화면에서 우측정렬 본문은 안 읽힌다 */
  .wk-big{min-height:76svh;padding:8vh 6vw}
  .wk-big.flip .body,.wk-big.flip .logo{align-self:flex-start;text-align:left}
  .wk-big.flip .d{margin-left:0}
  .wk-big.flip .bg::after{background:rgba(0,0,0,.07)
    linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.26) 42%,transparent 68%)}
  .wk-big .body{max-width:300px}
  .wk-big .t{font-size:1.75rem}
  .wk-big .d{max-width:none;font-size:.95rem;margin-bottom:2em}
  .wk-big .logo{max-width:34vw}

  /* 작은 칸 — 390px 에서 한 칸이 약 191px 이다. 그 폭에 맞춰 다시 짠다:
     · 높이를 세로로 세운다(3:4) — 좁은 가로 칸은 영상이 띠처럼 보인다
     · **설명은 감춘다.** 191px 폭에서 세 줄짜리 설명은 못 읽는다.
       카테고리 + 제목이면 무엇인지 알고, 자세한 건 상세면이 한다
     · 스크림을 아래쪽으로 더 끌어올려 두 줄 제목이 확실히 뜨게 한다 */
  .wk-pair{min-height:0;aspect-ratio:3/4}
  .wk-pair .body{padding:4vh 4.5vw 3.4vh}
  .wk-pair .bg::after{background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.5) 42%,rgba(0,0,0,.08) 72%,transparent)}
  /* ⚠ 라벨이 두 줄로 감기면서 카드가 지저분해졌다 — "브랜드 스케치필름 · COFFEE / KINGDOM (안동)".
     라벨은 콘텐츠가 아니라 **표식**이라 한 줄을 넘으면 제 일을 못 한다.
     한 줄로 묶고 넘치면 자른다. 전문은 DOM 에 그대로 있어 스크린리더는 다 읽고,
     자세한 건 어차피 상세면이 한다 */
  .wk-cat{display:block;font-size:8.5px;letter-spacing:.16em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wk-pair .t{font-size:1rem;line-height:1.25;margin-top:.62em;letter-spacing:-.025em}
  .wk-pair .d{display:none}
}

/* 아주 좁은 기기 — 두 칸이 나란히 서기엔 빠듯해지는 폭 */
@media(max-width:400px){
  .wk-grid{padding:72px 4vw 7vh;gap:7px}
  .wk-say{min-height:60svh;padding:12vh 7vw}
  .wk-list{--wgap:6px}
  .wk-pair .t{font-size:.92rem}
  .wk-pair .body{padding:3.4vh 4vw 3vh}
}

@media(prefers-reduced-motion:reduce){
  .wk-big .bg video,.wk-big .bg img,
  .wk-pair .bg video,.wk-pair .bg img{top:0;height:100%;transform:none!important}
}