/* ============================================================================
   섹션 조판 (sections.css) — /film 에서 나왔고 이제 전 면이 쓴다

   무엇인가: 현 sealkim.com `/film` 계열 8면의 조판을 **우리 클래스·우리 토큰으로**
   다시 쓴 것이다. Portfoliobox 의 CSS·마크업은 이 저장소에 들어오지 않는다.

   근거: `docs/superpowers/specs/live-metrics/*.json` — 라이브를 브라우저에 띄워
   모든 요소의 최종 계산값(getComputedStyle)을 뜬 실측 원장. 데스크톱 1440×900 /
   모바일 390×844 두 벌. 아래 숫자는 전부 그 원장에서 나왔고, 주석에 실측값을 적어 둔다.
   값을 고칠 일이 있으면 원장을 다시 뜨고 고친다 — 눈대중으로 바꾸지 않는다.

   왜 이렇게 하나: 원본 JSON에서 겹을 하나씩 읽어 합치려다 네 겹 중 세 겹을 빠뜨려
   두 번 틀렸다. 브라우저가 이미 합쳐 놓은 최종 숫자를 받아 적는 쪽이 빠뜨릴 데가 없다.
   ============================================================================ */

.pg{
  /* ── 실측에서 환원된 세 개의 상수 ────────────────────────────────
     ① 섹션 기준 높이 = 100vh. 원장의 813px(데스크톱)·757px(모바일)이 그 측정
        환경의 1vh×100 이다 — 창 높이(900·844)와 다른 건 브라우저 크롬 몫이지 설계값이 아니다.
     ② 세로 여백은 전부 이 기준 높이의 비율 — 7% / 12% / 5% / 3%
        (813×.07=56.91 · ×.12=97.56 · ×.05=40.65 · ×.03=24.39 — 원장과 소수점까지 일치)
     ③ 가로 여백·격자는 뷰포트 너비의 비율 — 5% / 7% / .7vw / 21vw          */
  --band:100vh;
  --pad-x:5%;                 /* 1440×.05 = 72px */
  --pad-in:7%;                /* 1440×.07 = 100.8px — 본문 블록 안쪽 여백 */
  --tile-gap:.7vw;            /* 1440×.007 = 10.08px */
  --tile-row:21vw;            /* 1440×.21 = 302.4px */
  --box-pad:3.5vw;            /* 50.4px@1440 — % 로 두면 섹션 폭(1296) 기준이 되어 5px 어긋난다 */

  font-size:16px;             /* 원장 데스크톱 루트 16px. 아래 em 은 전부 이것 기준 */
  background:var(--ground);
}

/* ══ 섹션 골격 ════════════════════════════════════════════════════
   래퍼(배경 = ground) + 섹션(자기 배경). 라이브의 sectionWrapper/Section 2겹 구조가
   하는 일이 이것뿐이라 그대로 둔다 — 섹션이 자기 배경을 갖고, 래퍼가 바탕을 깐다. */
/* padding-block:0 — site.css 의 일반 `section{padding:… 0}` 을 끊는다.
   /film 섹션의 세로 여백은 전부 밴드 비율로 따로 준다 */
.fs{position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:0 var(--pad-x);background:var(--ground)}
.fs.on-void{background:var(--void)}

/* 배경 이미지 — 두 겹(이미지 + 아주 옅은 스크림 rgba(0,0,0,.07) 실측) */
.fs__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat}
.fs__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.07)}
.fs__body{position:relative;z-index:1;width:100%}

/* ── 커버 · 제목 좌하단 (실측 §0: 높이 .8밴드 · 패딩 7%/12% · flex-end) ── */
.fs--cover{min-height:calc(var(--band) * .8);justify-content:flex-end;
  padding-block:calc(var(--band) * .07) calc(var(--band) * .12)}

/* ── 문장 한 줄만 있는 띠 (실측 §1: 1밴드 · 가운데) ───────────────── */
.fs--words{min-height:var(--band);justify-content:center;align-items:center}

/* ── 이미지 위 · 글 아래 (실측 §2: 이미지 .8밴드 · 아래 여백 7%) ──── */
.fs--imgtop{min-height:var(--band);padding-inline:0;
  padding-block:0 calc(var(--band) * .07)}
.fs--imgtop .fs__still{position:relative;height:calc(var(--band) * .8);
  margin-bottom:4em;                                    /* 실측 64px */
  background-size:cover;background-position:center}
.fs--imgtop .fs__body{padding:calc(var(--band) * .05) var(--pad-in) 0}

/* ── 커버 위 반투명 박스 (실측 §3: 높이 .9밴드 · 박스 우측 · 라운드) ──
   Seal 이 "회색박스 안의 글"로 지적한 그 자리다. 박스는 배경색을 그대로 쓰되
   불투명도만 낮춘다 — 뒤 이미지가 비치는 게 이 조판의 핵심이다. */
.fs--boxed{min-height:calc(var(--band) * .9);justify-content:center;align-items:flex-end;
  padding-block:calc(var(--band) * .07)}
.fs--boxed .fs__body{width:min(621px,100%);padding:var(--box-pad);text-align:center}
/* ★불투명도는 판 자체에만 건다. 본문에 걸면 글자까지 흐려진다 —
   실측: .8 이 `:before` 레이어에 있고 글자는 opacity 1 이다 */
.fs--boxed .fs__body::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:12px;background:var(--ground);opacity:.8}
.fs--boxed.on-void .fs__body::before{background:var(--void)}

/* ── 포스터 한 장 (실측 §5: 정사각 풀블리드 · 좌상단 캡션 · 가운데 재생 표식) ── */
.fs--poster{padding-inline:0;padding-block:0}
.fs__poster{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  text-decoration:none;background:var(--void)}
.fs__poster img,.fs__poster video{width:100%;height:100%;object-fit:cover}
.fs__poster figcaption{position:absolute;top:1.5em;left:1.5em;z-index:1;    /* 24px */
  font-family:var(--title-ko);font-size:1.2em;font-weight:700}              /* 19.2px */
html[lang="en"] .fs__poster figcaption{font-family:var(--title-en)}
.fs__poster .play{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:1;
  width:74px;height:74px;border:2px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;transition:background .35s,color .35s}
.fs__poster .play::before{content:"";border-left:16px solid currentColor;
  border-block:10px solid transparent;margin-left:4px}
.fs__poster:hover .play{background:var(--accent);border-color:var(--accent);color:var(--void)}

/* ── 루프 커버 (실측 /short-film: 90vh 풀블리드 · 왼쪽 576px 단) ──────
   라이브는 배경에 Vimeo 임베드를 깐다. 우리는 Seal 이 편집해 준 셀프호스트 MP4 를
   쓴다 — 우리 스택이 정한 방식이고(muted·자동루프·site.js 가 화면 안 것만 재생),
   외부 임베드 하나가 줄어 초경량 원칙에도 맞는다. */
.fs--reel{min-height:calc(var(--band) * .9);justify-content:center;padding-inline:var(--pad-x)}
.fs--reel .fs__loop{position:absolute;inset:0;overflow:hidden}
.fs--reel .fs__loop video,.fs--reel .fs__loop img{width:100%;height:100%;object-fit:cover}
.fs--reel .fs__loop::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.07)}
.fs--reel .fs__body{max-width:576px;padding-inline:72px;text-align:center}  /* 실측 576·72 */
.fs--reel .fs__eyebrow{max-width:900px;text-align:center;margin-bottom:.7em}
.fs--reel .fs__head{max-width:900px;font-size:2.5em;line-height:1;font-weight:400;
  text-align:center;margin-bottom:.7em}                        /* 40/40 · 아래 28px */
.fs--reel .fs__copy{max-width:1000px;text-align:left;margin-top:2.5em}
/* WATCH ME — 실측 12.8px · 테두리 0.1em · 안쪽 8.96/17.92 */
.fs__watch{display:inline-block;font-family:var(--title-en);font-size:.8em;letter-spacing:.1em;
  text-decoration:none;padding:.7em 1.4em;border:.1em solid var(--ink);
  transition:background .3s,color .3s,border-color .3s}
.fs__watch:hover{background:var(--accent);border-color:var(--accent);color:var(--void)}

/* ── 면 머리말 (실측 /short-film §0 · /seals-works §0 — 두 원장이 소수점까지 같다)
   .8밴드 · 제목 95.36/162.112 · 폭 1069 · 아래 47.68 · 강조 rgb(245,110,35)
   ★강조색은 옮긴 게 아니라 **이미 우리 값이었다** — 라이브가 쓰는 그 숫자가 --accent 다. */
.fs--intro{min-height:calc(var(--band) * .8);justify-content:center;
  padding-block:calc(var(--band) * .07)}
/* 얼굴 — 원장은 Arial Black(Portfoliobox 템플릿 잔재)이다. 확정 서체에 그 자리는
   `--display-en`(Anton) 이다. 홈 히어로의 큰 글자와 **같은 얼굴**이 되는 쪽을 택했다 —
   2026-08-03 Seal: "지금은 너무 얇아. sealkim.com처럼 굵고 강렬하게."
   크기·행간·폭·아래 여백은 원장 그대로 받는다.
   ⬛ 이 한 줄이 `/film/short` 머리말에도 소급된다 — 같은 컴포넌트다 */
.fs__big{max-width:1069px;font-size:5.96em;line-height:1.7;font-weight:400;
  font-family:var(--display-en);margin-bottom:.5em}            /* 95.36/162.1 · 47.68 */
.fs__big em{font-style:normal;color:var(--accent)}
.fs--intro .fs__copy{max-width:632px}
/* /work 머리말만 본문이 한 단 크다 — 원장 19.2/32.64 · 폭 598
   (/short-film 은 같은 자리가 16/27.2 · 폭 632 다. 조판이 아니라 면별 값이라 갈라 둔다) */
.fs--intro.is-work .fs__copy{font-size:1.2em;max-width:598px}

/* ── 모자이크 격자 (실측 §4: 3열 · 행 21vw · 간격 .7vw · 1·5번째가 2×2) ──
   grid-auto-rows 가 고정 높이라 큰 칸은 자동으로 정확히 두 배가 된다. */
.fs--mosaic{padding-inline:0;padding-block:calc(var(--band) * .03)}
.fs__tiles{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--tile-gap);grid-auto-rows:var(--tile-row)}
.fs__tiles > *{position:relative;overflow:hidden;display:block}
.fs__tiles > *:nth-child(6n+1),
.fs__tiles > *:nth-child(6n+5){grid-column:span 2;grid-row:span 2}
.fs__tiles img,.fs__tiles video{width:100%;height:100%;object-fit:cover}
/* 라이브의 hover-opacity — 누를 수 있는 칸이라는 신호. 그 이상 움직이지 않는다 */
.fs__tiles a{transition:opacity .35s}
.fs__tiles a:hover{opacity:.72}

/* ── 100vh 루프 히어로 (실측 /five-days §0: 풀블리드 · 글 없음) ─────── */
.fs--hero{min-height:var(--band);padding:0}
.fs--hero .fs__loop{position:absolute;inset:0;overflow:hidden}
.fs--hero .fs__loop video,.fs--hero .fs__loop img{width:100%;height:100%;object-fit:cover}

/* ── 왼쪽 사진 · 오른쪽 글 (실측 /bkk-life §1: 648px 사진 · 428px 글) ── */
.fs--split{min-height:calc(var(--band) * .7);flex-direction:row;
  justify-content:space-between;align-items:center;
  padding-block:calc(var(--band) * .07)}
.fs--split .fs__shot{flex:0 0 45%}                            /* 648px@1440 */
.fs--split .fs__shot img{width:100%;height:auto}
.fs--split .fs__body{flex:0 0 29.7%;width:auto}               /* 427.7px@1440 */
.fs--split .fs__head{max-width:900px;margin-bottom:.3em}      /* 아래 12px */

/* ── 숨 고르는 빈 띠 (실측 3vh). 섹션 사이 간격을 이걸로 준다 ─────────
   가로 여백은 `.fs` 기본(5vw)을 그대로 둔다 — 원장도 72 다. 전에 `padding:0` 으로
   가로까지 지워 놨었다. 자식이 없는 띠라 화면은 같지만 원장과 어긋나 있었다
   (홈의 `.fs--gap5` 는 처음부터 `padding-block:0` 이라 맞았다). */
.fs--gap{min-height:3vh;padding-block:0}

/* ── 그러데이션 띠 (실측 /five-days §5: 100vh · 아래에서 위로 밝아진다) ── */
.fs--fade{min-height:var(--band);padding:0;
  background:linear-gradient(0deg,rgba(239,239,239,.8) 0%,#020202 72.86%)}

/* ── 크레딧 지그재그 (실측 CAST: 밝은 지면 · 907px · 좌우 번갈아) ───── */
.fs--cast{min-height:20px;padding-block:calc(var(--band) * .03) 0;align-items:center}
.fs--cast .fs__head{max-width:800px;text-align:center;font-weight:400;margin-bottom:0}
.fs__zig{display:grid;gap:1vw;width:63%;margin-inline:auto}   /* 907px@1440 · 14.4px */
.fs__zig figure{display:flex;align-items:center}
.fs__zig figure:nth-child(even){flex-direction:row-reverse}
.fs__zig .shot{flex:1 1 50%;aspect-ratio:1920/1080}
.fs__zig .shot img{width:100%;height:100%;object-fit:cover}
.fs__zig figcaption{flex:1 1 50%;padding-inline:10%}          /* 45.36px@453.6 */
.fs__zig figure:nth-child(even) figcaption{text-align:right}
.fs__zig .who{display:block;font-size:1.2em;font-weight:700}  /* 19.2px */
.fs__zig .role{display:block;font-size:1em;padding-top:.3em}  /* 16px · 4.8px */

/* 밝은 지면 — 글자색이 뒤집힌다 */
.fs.on-band{background:var(--band);color:#1A1A1A}

/* ══ 타이포 — 전부 루트(16px) 기준 em. 원장 픽셀값을 괄호에 적어 둔다 ══ */
.fs__eyebrow{max-width:1000px;font-size:1em;font-weight:400;line-height:1.125;
  text-align:left;margin-bottom:.6em}                         /* 16/18 · 아래 9.6px */
.fs__title{max-width:700px;font-size:2.5em;line-height:1.15;font-weight:400}  /* 40/46 */
.fs__head{max-width:1000px;font-size:2.5em;line-height:1.8;font-weight:700;
  text-align:left;margin-bottom:.7em}                         /* 40/72 · 아래 28px */
.fs--boxed .fs__head{max-width:520px;font-weight:400;text-align:center}
.fs__pull{max-width:1607px;font-size:3em;line-height:1.7;font-weight:400;
  text-align:center}                                          /* 48/81.6 */
.fs__copy{font-size:1em;line-height:1.7;margin-bottom:1em}    /* 16/27.2 · 아래 16px */

/* 두 단 본문 (실측 §2: 폭 594 두 단 · 사이 50px · 전체 1238) */
/* 폭 제한을 두지 않는다 — 안쪽 여백 7%가 폭을 정한다 (1440 → 1238, 한 단 594).
   단 사이 49.53px = 한 단 안쪽 여백 24.77 두 개 */
.fs__cols{display:grid;grid-template-columns:1fr 1fr;gap:49.53px;margin-block:1.6em}
.fs--boxed .fs__copy{text-align:left}

/* 서체 — 확정본을 그대로 쓴다 (2026-08-03 Seal 승인).
   라이브가 쓰던 Poppins/Bayon 계열은 가져오지 않는다. */
.fs__eyebrow,.fs__title,.fs__head,.fs__pull{font-family:var(--title-ko)}
html[lang="en"] .fs__eyebrow,html[lang="en"] .fs__title,
html[lang="en"] .fs__head,html[lang="en"] .fs__pull{font-family:var(--title-en)}
.fs__title,html[lang="en"] .fs__title{text-transform:uppercase}
.fs__copy{font-family:var(--body-ko)}
html[lang="en"] .fs__copy{font-family:var(--body-en)}

/* ══ 갈림길 면 (/film) — 큰 이미지 두 장, 장편·단편 ═════════════════
   2026-08-03 Seal 확정: "큰 이미지 두개만 보여주면서 장편, 단편을 클릭"       */
.fs--fork{padding:0}
.fork{display:grid;grid-template-columns:1fr 1fr;gap:var(--tile-gap)}
.fork a{position:relative;display:block;min-height:calc(var(--band) * .9);
  overflow:hidden;text-decoration:none}
.fork img,.fork video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.fork a:hover img,.fork a:hover video{transform:scale(1.04)}
.fork figcaption{position:absolute;inset:auto 0 0 0;z-index:1;
  padding:calc(var(--band) * .12) var(--pad-x) calc(var(--band) * .05);
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}
.fork .k{display:block;font-family:var(--title-en);font-size:.75em;letter-spacing:.2em;
  color:var(--accent)}
.fork .t{display:block;margin-top:.5em;font-family:var(--title-ko);font-size:2em;
  font-weight:700;line-height:1.2}

/* ══ 모바일 (라이브 분기점 1000px) ═══════════════════════════════════
   루트가 17px 로 커지고(=1.0625배), 제목 계열만 따로 줄어든다.
   아래 값의 출처: 본문 15.3(=.9em) · §1 25.5(=1.5em) · §2·§3 제목 30.6(=1.8em)
                   §0 머리말 제목 42.5/42.5(=2.5em/1.0)

   ⚠ 2026-08-03 `/work` 원장 대조에서 **`.fs__big` 모바일 규칙이 아예 없었던 것**을 찾았다.
     위 줄에 "데스크톱과 같은 배수라 그대로 둔다"고 적혀 있었는데 사실이 아니다 —
     데스크톱은 5.96em(95.36@16), 모바일 원장은 2.5em(42.5@17)이다. 규칙이 없으니
     모바일에서 5.96em×17 = 101px 로 그려졌다. 주석만 있고 코드가 없던 자리다.
     `/film/short` 머리말도 같이 틀려 있었고 아래 한 줄로 함께 고쳐진다.

   ⚠ **이 숫자들은 500px 폭에서 잰 것이다.** 헤드리스 Chrome 이 창을 500 아래로 못 줄이는데
     그걸 모르고 "390×844" 라고 적어 왔다(2026-08-03 발견). `measure-live.py` 는 고쳤고
     `live-metrics/home.json` 의 mobile 은 이제 진짜 390 이다.
     ★ `/film` 8면의 mobile 원장과 아래 값은 아직 500 기준이다 — 모바일 라운드에서 다시 뽑는다.
     분기점(1000px)과 배수 관계는 폭과 무관하므로 그대로 유효하다.

   ⚠⚠ 2026-08-03 발견 — 위 줄이 원래 별표 두 개 뒤에 바로 슬래시가 붙은 형태였다.
     그 세 글자가 곧 주석 종료 기호라 주석이 거기서 닫혔고, 남은 문장이 선택자가 되면서
     CSS 에러 복구가 아래 미디어쿼리 블록을 통째로 그 선택자의 본문으로 먹어 치웠다.
     즉 이 블록은 지금까지 한 번도 안 걸렸다 — 파싱된 시트의 미디어 규칙이 홈 것 하나뿐이었다
     (브라우저 `cssRules` 로 확인). `/film` 8면 모바일 조판이 전부 죽어 있던 원인이다.
     ★CSS 주석 안에서 강조는 별표를 쓰지 않는다. `★` 로 쓴다.                        */
@media(max-width:1000px){
  .pg{font-size:17px;--box-pad:5%}
  .fs__head{font-size:1.8em;line-height:1.8}
  .fs__pull{font-size:1.5em;font-weight:700}
  .fs__copy{font-size:.9em}
  /* 원장 42.5/42.5 — 데스크톱(95.36/162.1)과 배수가 다르다. 위 ⚠ 참고 */
  .fs__big{font-size:2.5em;line-height:1}
  /* `.fs--intro.is-work .fs__copy` 가 `.fs__copy` 보다 특정도가 높아 위 .9em 을 덮는다.
     모바일 원장은 여기도 15.3(=.9em)이라 같은 특정도로 되돌려 놓는다 */
  .fs--intro.is-work .fs__copy{font-size:.9em}
  .fs__cols{grid-template-columns:1fr;gap:0;margin-top:1.7em}

  .fs--boxed .fs__body{width:100%}
  /* 라이브 mobile2Row — 2열 정사각, 큰 칸 없음(전부 같은 크기). 간격 17px@500 */
  .fs__tiles{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:3.4vw}
  .fs__tiles > *{aspect-ratio:1/1}
  .fs__tiles > *:nth-child(6n+1),
  .fs__tiles > *:nth-child(6n+5){grid-column:auto;grid-row:auto}
  .fork{grid-template-columns:1fr}
  .fork .t{font-size:1.6em}
}

/* ══════════════════════════════════════════════════════════════════
   홈 (/) — 실측 원장 `live-metrics/home.json` (라이브 /home 14섹션)
   ------------------------------------------------------------------
   환원된 밴드 비율: .9(히어로) · .7(소개) · 1.0(워드마크) · .65(케이스) · .05(빈 띠)
   세로 여백: 7% / 8% · 가로 여백: 5vw / 8vw — /film 과 같은 상수 체계다.
   섹션 안쪽 폭 1296 = 1440 − 5vw×2. 전부 원장과 소수점까지 일치.

   ★ /work 목록이 케이스 섹션을 그대로 다시 쓴다 — 라이브에서도 홈과 /seals-works 가
     같은 viewId(logoleft·headerleft)다. `.fs--case` 를 홈 전용으로 두지 않는 이유.
   ══════════════════════════════════════════════════════════════════ */

/* ── 히어로 = 메뉴 (실측 §0: .9밴드 · 배경 영상 · 링크 블록 우측·세로 가운데) ──
   라이브는 배경에 Vimeo 임베드를 깐다. 우리는 Seal 편집본 셀프호스트 MP4 —
   /film `.fs--reel` 과 같은 규칙이고 외부 임베드가 하나 줄어든다.
   원장: 링크 블록 x=1072 w=296 → 오른쪽 끝 1368 = 1440−72(5vw). 세로 179~552 가운데. */
.fs--menu{min-height:calc(var(--band) * .9);justify-content:center;align-items:flex-end;
  padding-block:0}
.fs--menu .fs__loop{position:absolute;inset:0;overflow:hidden}
.fs--menu .fs__loop video,.fs--menu .fs__loop img{width:100%;height:100%;object-fit:cover}
.fs--menu .fs__loop::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.45) 100%)}
.fs--menu .fs__body{width:auto}
/* ★좌측 정렬 — 2026-08-03 Seal: "좌측정렬해서 줄을 맞춰. i am seal의 i에 맞춰봐."
   블록 자체는 화면 오른쪽에 붙되(.fs--menu align-items:flex-end · 원장 우측단),
   그 안에서 세 글자의 **왼쪽 끝**을 맞춘다. 가장 긴 I AM SEAL 의 I 가 기준선이 된다.
   컨테이너 폭이 가장 긴 항목 폭이라 자동으로 그렇게 선다. */
.hero-nav{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hero-nav a{position:relative;display:block;text-decoration:none;color:var(--ink);
  font-family:var(--display-en);font-size:3.76em;line-height:1.4;letter-spacing:.05em;
  font-weight:400;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 .05em .1em rgba(0,0,0,.35);
  transition:color .35s cubic-bezier(.16,1,.3,1)}
/* 원장: 60.16px(3.76em) · 행간 84.22(1.4em) · 자간 3.008(.05em). 크기·행간·자간은 원장 그대로 받고
   **얼굴만 Anton 으로** 바꿨다 — 2026-08-03 Seal: "지금은 너무 얇아. sealkim.com처럼 굵고 강렬하게."
   ★한글 라벨은 뺐다 — "메뉴도 마찬가지야. 한글번역은 필요없어."
   메뉴는 셋뿐이다. CONTACT 는 I AM SEAL 안으로 들어간다 */

/* 밑줄 — 2026-08-03 Seal: "언더라인이 텍스트와 겹쳐져있어서 에러같이 보여."
   원인은 `bottom:.32em`(19.2px)이 **정확히 baseline 자리**였다는 것.
   행간 1.4 의 아래 여백이 12px, Anton 의 디센더가 em 박스 아래 약 7px →
   합쳐 19px 이 글자 바닥이다. 밑줄을 그 아래(.06em ≈ 3.6px)로 내렸다.
   호버하면 밑줄과 **함께 글자도 강조색으로** 간다 — 같은 지시의 뒷부분 */
.hero-nav a::after{content:"";position:absolute;left:0;bottom:.06em;
  height:4px;width:0;background:var(--accent);
  transition:width .45s cubic-bezier(.16,1,.3,1)}
.hero-nav a:hover{color:var(--accent)}
.hero-nav a:hover::after{width:100%}

/* ── 소개 2단 (실측 §1: .7밴드 · 좌 글 399 / 우 사진 605×1000 · 여백 8vh·8vw) ── */
.fs--profile{min-height:calc(var(--band) * .7);flex-direction:row;
  justify-content:space-between;align-items:center;
  padding-block:calc(var(--band) * .08);padding-inline:8vw}
.fs--profile .fs__body{flex:0 0 33%;width:auto}          /* 399px@1209.6 안쪽폭 */
.fs--profile .fs__shot{flex:0 0 50%;max-width:605px}     /* 원장 605×1000 */
/* ★max-height 1000 + cover 가 원장값이다. 안 걸면 3213×5712 원본 비율대로 1075 까지
   자라 섹션이 75px 길어진다 — 첫 대조에서 실제로 그렇게 어긋났다 */
.fs--profile .fs__shot img{width:100%;height:1000px;max-height:1000px;object-fit:cover;
  display:block;
  border-radius:3.2em;                                    /* 원장 51.2px = 3.2em */
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
/* 제목 — 원장 42.56/44.69(2.66em/1.05). 한글은 음절 폭이 1.5배라 그 크기로 두면
   399px 단에서 여섯 줄이 넘는다. 폭 비율을 맞춰 2.1em 으로 내렸다(=한글 실폭 기준 동치) */
.fs__lead{font-family:var(--title-ko);font-size:2.1em;line-height:1.35;font-weight:700;
  letter-spacing:-.02em;margin-bottom:.3em}               /* 아래 12.77px = .3em */
html[lang="en"] .fs__lead{font-family:var(--title-en);font-size:2.66em;line-height:1.05;
  font-weight:400;text-transform:none}
/* 원장 §1 구분선 — 100px · 위 25.6(1.6em) · 아래 9.6(.6em) · 굵기 .1em */
.fs__rule{width:100px;height:0;border-top:.1em solid var(--ink);
  margin:1.6em 0 .6em}
/* 원장 24/28.8 · 자간 .48 · 색 #9B9B9B. 우리 토큰 --dim(#A3A3A3)이 그 자리다 */
.fs__note{font-family:var(--body-ko);font-size:1.3em;line-height:1.6;letter-spacing:.02em;
  color:var(--dim);margin-bottom:1.1em}
html[lang="en"] .fs__note{font-family:var(--body-en);font-size:1.5em;line-height:1.2}
.fs__note b{font-weight:700;color:var(--accent)}          /* 라이브 #F5A623 → 확정 강조색 */
/* 바깥으로 나가는 유일한 링크 — YourStoryKorea (2026-08-06 Seal 지시).
   강조색 + 밑줄이 호버에 채워진다. `.hud nav a` 의 밑줄 문법을 그대로 쓴다 —
   이 사이트에서 "누를 수 있다"는 신호는 하나면 된다. */
.fs__note .ysk{position:relative;color:var(--accent);font-weight:700;text-decoration:none}
.fs__note .ysk::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;
  background:var(--accent);transition:right .35s ease}
.fs__note .ysk:hover::after{right:0}

/* ── 워드마크 풀블리드 (실측 §2: 1.0밴드 · object-fit contain · 글 없음) ── */
.fs--mark{min-height:var(--band);justify-content:center;align-items:center;
  padding-block:calc(var(--band) * .07);padding-inline:var(--pad-x)}   /* 원장 57 / 72 */
.fs--mark img{width:min(62%,900px);height:auto;object-fit:contain}

/* ── 케이스 카드 (실측 §4·6·8·10: .65밴드 최소 · 배경 루프 · 좌측 단)  ──
   원장 기하: 안쪽 블록 y=섹션+57(7%) · 로고가 맨 위 · 글 묶음이 맨 아래.
   라이브는 그 사이를 요소별 margin-top(160·160·104·160px)으로 벌려 놨는데
   카드마다 값이 다르고 설계값이 아니다 → **space-between 한 규칙으로 정리했다.**
   결과 좌표는 같고(로고 위 · 글 아래) 카피 길이가 바뀌어도 안 무너진다.

   ★min-height 를 원장의 명목값 65vh 가 아니라 **80vh** 로 둔 이유:
     라이브에서 65vh(528px)는 **한 번도 안 걸린다.** 네 장의 실제 높이가
     714 · 622 · 666 · 716 = .88 · .77 · .82 · .88 밴드다. 위 margin 들이 밀어 올린 값이고,
     그게 화면에 보이는 카드 높이다. 65vh 를 그대로 쓰면 우리 카드는 528 로 주저앉아
     "로고 위 · 글 아래"가 붙어 버린다 — 숫자는 맞고 화면이 틀리는 경우다.
     관측 구간(.77~.88) 안쪽인 .8 을 최소값으로 잡는다.

   ⚠ 대조표에서 `justify-content` 가 라이브 center / 우리 space-between 으로 갈린다.
     라이브는 섹션이 안쪽 블록 하나를 center 로 놓고 그 블록 안에서 위아래로 벌리는
     2겹 구조고, 우리는 겹을 하나 줄여 섹션이 직접 벌린다. 결과 좌표는 같다. */
.fs--case{min-height:calc(var(--band) * .8);justify-content:space-between;
  padding-block:calc(var(--band) * .07);
  /* ★버튼 호버의 knockout(아래 `.fs__case-cta`)이 배경 루프와 합성되려면 둘이 같은
     쌓임 맥락에 있어야 한다. `isolation` 으로 그 맥락을 섹션에 고정하고, 루프를 z:-1 로
     내려 본문·로고가 z-index 없이도 위에 오게 했다 — 본문에 z-index 를 주면 거기서
     새 맥락이 생겨 blend 가 갇힌다(글자가 안 뚫린다) */
  isolation:isolate}
.fs--case .fs__loop{position:absolute;inset:0;overflow:hidden;z-index:-1}
/* 루프가 z:-1 로 내려갔으므로 본문·로고는 z-index 없이도 그 위에 온다.
   z-index 를 주면 거기서 새 쌓임 맥락이 생겨 버튼 blend 가 갇힌다 */
.fs--case .fs__body{z-index:auto}
.fs--case .fs__loop video,.fs--case .fs__loop img{width:100%;height:100%;object-fit:cover}
/* 원장의 `.bgOverlay` = rgba(0,0,0,.07). 그 위에 **왼쪽 단만** 어둡게 하는 겹을 하나 더 뒀다.
   원장에 없는 유일한 추가다. 이유: 라이브도 글자를 text-shadow 로 겨우 띄우고 있는데
   (serverPages Style 에 `0 .05em .1em rgba(0,0,0,.2)` 가 박혀 있다) 밝은 바닥이 나오는
   구간에서는 그걸로도 본문이 안 읽힌다. 글이 없는 오른쪽은 손대지 않아 영상은 그대로 보인다. */
.fs--case .fs__loop::after{content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.07)
    linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.22) 38%,transparent 62%)}
.fs--case .fs__logo{height:auto;object-fit:contain;
  filter:drop-shadow(0 .05em .1em rgba(0,0,0,.35))}
/* ★바닥 정렬을 `margin-top:auto` 로 못박는다 (2026-08-06).
   이 절은 `justify-content:space-between` 인데, 그건 **자식이 둘일 때만** 로고를 위로
   본문을 아래로 보낸다. 2026-08-06 에 로고 층을 걷자 자식이 하나가 되면서 본문이
   **통째로 위로 붙었다**(Seal: *"텍스트들 위치가 왜이래? 밑에 있어야하는거 아냐?"*).
   ⚠ 배치를 **자식 수에 기대는 규칙**(space-between)으로 잡아 두면 구성이 바뀌는 순간
     조용히 뒤집힌다. 바닥에 서야 하는 것은 바닥이라고 적는다 —
     `Earth Account` 원장 두 칸에서 배운 그 처방이다(밑판이 막는다).
   ⚠ 로고가 있는 면(구판 `-v1` 들)도 결과가 같다 — 자동 마진이 남는 공간을 먹으므로
     로고 위 / 본문 아래가 그대로 유지된다. */
.fs--case .fs__body{align-self:flex-start;margin-top:auto;max-width:420px;  /* 원장 382~419 */
  text-shadow:0 .05em .1em rgba(0,0,0,.35)}                   /* 원장값(.2)에서 약간 올림 */
/* 원장 Aldrich 16px rgba(255,255,255,.35~.37) — 확정 서체엔 Aldrich 가 없다.
   같은 역할(작은 대문자 크레딧 라벨)을 site.css `--title-en` 으로 낸다 */
.fs__credit{font-family:var(--title-en);font-size:.8em;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:1em}
html[lang="ko"] .fs__credit{font-family:var(--title-ko);letter-spacing:.14em}
/* 원장 40/40 · 자간 −.4(−.01em) · 아래 28(.7em) */
.fs--case .fs__title{font-size:2.5em;line-height:1.15;letter-spacing:-.01em;
  font-weight:700;margin-bottom:.7em;text-transform:none;max-width:420px}
/* 원장 16/21.6 · 폭 333~350 · 아래 39~46 */
.fs--case .fs__copy{max-width:350px;line-height:1.35;margin-bottom:2.5em}
/* 원장 버튼: 8px 글자 · 96×32 · 테두리 1px. 8px 은 라이브 위생 버그라(0.5em 이 굳은 값) 안 옮겼다.
   ★글자는 영어 원문 그대로 둔다 — 2026-08-03 Seal: "케이스보기는 그냥 영어 원문으로 두자."
     두 언어 모두 같은 라벨이라 `html[lang]` 분기를 두지 않는다 */
/* ★크기 — 원장 8px 은 안 읽혀서 12.8px 로 올렸는데 이번엔 **너무 컸다**
   (2026-08-03 Seal: "비교적 이게 커서 디자인 밸런스가 안맞아").
   10.9px(.68em) + 여백을 조여 상자를 약 149×31 로 줄였다 — 원장 96×32 의 비례에 다시 붙는다.
   `/film` 의 `.fs__watch` 는 다른 컴포넌트라 건드리지 않았다 */
.fs__case-cta{display:inline-block;font-family:var(--body-en);font-size:.68em;
  letter-spacing:.14em;font-weight:600;text-transform:uppercase;text-decoration:none;
  color:var(--ink);padding:.75em 1.5em;border:1px solid var(--ink);
  /* ── 호버: 흰색이 차오르고 **글자가 뚫린다** (2026-08-03 Seal)
     "우리 강조색은 여기에 안맞다. 흰색으로 처리하자. 흰색이 채워지면서 글씨는 투명해지는걸로."
     `screen` 합성이라 흰 판은 흰색 그대로 남고 검은 글자 자리는 **뒤 영상이 그대로 비친다.**
     (screen = 1-(1-a)(1-b) → 흰색은 흰색, 검정은 아래 픽셀 그대로)
     비호버 상태는 영향이 없다 — 흰 글자·흰 테두리·투명 배경 전부 screen 에서 불변이다.
     합성 대상이 배경 루프가 되도록 `.fs--case` 에 `isolation:isolate` 를 걸어 뒀다(위). */
  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}
.fs__case-cta:hover{background-size:100% 100%;color:#000;border-color:#fff}

/* ── 빈 띠 5vh (실측 §5·7·9·11: 40.65px = 813×.05) ────────────────── */
.fs--gap5{min-height:5vh;padding-block:0}   /* 가로 여백은 .fs 기본(5vw) 그대로 — 원장도 72 */

/* ══ 홈 모바일 (원장 390×844 · 1vh=757) ═══════════════════════════ */
@media(max-width:1000px){
  /* ★블록은 모바일에서도 **오른쪽**이다 (2026-08-03 Seal: "데스크탑버전처럼 오른쪽에 위치해야지").
     전에 `flex-start` 로 왼쪽에 붙여 놨었다 — 원장도 데스크톱도 오른쪽이라 근거가 없었다.
     블록 안에서 글자 왼쪽 끝을 맞추는 규칙(`.hero-nav{align-items:flex-start}`)은 그대로다 */
  .fs--menu{padding-inline:var(--pad-x)}
  .hero-nav a{font-size:2.5em}   /* 정렬은 데스크톱과 같다 — 좌측·왼쪽 끝 맞춤 */
  .fs--profile{flex-direction:column;align-items:stretch;padding-inline:var(--pad-x);
    gap:2.4em}
  .fs--profile .fs__body,.fs--profile .fs__shot{flex:0 0 auto;max-width:none}
  .fs__lead{font-size:1.8em}
  .fs__note{font-size:1em}
  .fs--profile .fs__shot img{border-radius:1.6em}
  .fs--mark img{width:82%}
  /* 케이스 글 묶음 — 폭을 좁힌다 (2026-08-03 Seal: "텍스트 박스 넓이가 지금은 너무 넓어서
     텍스트들의 밀도가 떨어져보여"). 전 판은 `max-width:none` 이라 화면 폭(90vw=351@390)을
     다 썼다. 300 으로 캡을 씌우면 한 줄이 짧아져 문단이 뭉친다.
     `max-width` 는 컨테이너보다 좁을 때만 걸리므로 320px 기기에서도 넘치지 않는다 */
  .fs--case .fs__body{max-width:300px}
  .fs--case .fs__title{font-size:1.8em;max-width:none}   /* 폭은 body 가 정한다 */
  .fs--case .fs__copy{max-width:none}
}

/* ══ 검은 지면에서의 홈 (2026-08-06 Seal: *"배경이 바뀌었고"*) ═════════
   `.fs` 는 절마다 제 배경(`--ground`)을 칠하고 있었다. 사이트 전체 지면이 검정으로
   확정된 뒤에도 이 파일은 회색을 들고 있었다(2026-08-03 결정의 소급분).
   ★**지면은 body 한 곳에서만 칠한다** — 절의 배경을 걷고 밑판이 비치게 둔다.
   ⚠ 전역으로 걷지 않고 `body.tone-void` 안에서만 걷는다. 이 파일을 아직 회색으로 쓰는
     구판 면들(`/film` 구판·`work-*-v1`)이 같이 있어서, 전역으로 바꾸면 그 면들이
     한꺼번에 바뀐다. 그 면들은 제 라운드에서 게이트를 탄다.
   ⚠ 밝은 밴드(`.on-band`)는 그대로 둔다 — 그건 지면이 아니라 **의도한 띠**다. */
/* ⚠ 절만 걷으면 안 된다 — **래퍼(`.pg`)가 따로 바탕을 깔고 있다.** 라이브의
   sectionWrapper/Section 2겹 구조를 그대로 옮긴 자리다(이 파일 머리 주석).
   절을 투명으로 만들어 놓고 화면이 그대로 회색이라 한참 봤다. 겹이 둘이면 둘 다 본다. */
body.tone-void .pg{ background:transparent; }
body.tone-void .fs{ background:transparent; }
body.tone-void .fs--boxed .fs__body::before{ background:var(--void); }