/* ==========================================================================
 * partcover.css — Part II 간지 (파란 면이 앞 지면을 덮으며 아래에서 올라온다)
 * ==========================================================================
 * 두 가지를 합친 화면이다.
 *   ① 들어오고 나가는 방식 — **흐름대로 올라와서, 한 화면 붙어 섰다가, 놓인다** (2026-08-29 채린).
 *      · 들어올 때: 앞 지면을 덮지 않는다. 검정 바탕이 페이지와 **함께 스크롤**돼 올라온다
 *        (원본 enso.readymag.com/eames/plywood-chairs/ 의 색 블록도 sticky 없이 그냥 밀려 올라온다).
 *      · 화면을 채우면: 인트로 표지(.chapter-cover)와 **같은 장치**로 붙어 선다 —
 *        긴 트랙(--pc-track) 안에 한 화면(.partcover__screen)이 sticky 로 붙는 구조.
 *        멈춰 있는 길이 = --pc-track − 100svh. 이 구간에서 색이 물들고 카드가 나온다.
 *      · 트랙이 끝나면: 붙어 있던 화면이 풀려 다음 섹션(파트2 본문)으로 넘어간다.
 *      ⚠ 한때 앞 지면을 **덮으며** 올라오게 만들었다(margin-top: -100svh). 그건 되돌렸다 —
 *        지금 sticky 는 '덮기'가 아니라 '멈춰 서기'에만 쓴다.
 *   ② 내용이 나오는 방식 — 채린이 준 영상(5초 지점, Musée des Beaux-Arts 릴)의 방식.
 *      글·사진·기호가 **마스크가 열리며** 제자리에서 드러난다(움직여 들어오지 않는다).
 *      사진은 오른쪽 끝에서 왼쪽으로 열린다 — 영상에서 새 그림이 나오던 방향 그대로다.
 *
 * ★ 조절하는 곳 ★
 *   --pc-bg / --pc-bg-rise   바탕색 (자리 잡은 뒤 / 올라올 때)
 *   --pc-track     트랙 길이. 여기서 100svh 를 뺀 만큼 화면이 **멈춰 선다**
 *   --pc-pad-x     좌우 여백
 * ========================================================================== */

.partcover {
  /* ★ 바탕색 ★ **파랑으로 올라와 검정으로 가라앉는다** (2026-08-30 채린 지정).
     지금 사진이 파란 바탕 그림이라, 지면이 검정이어야 사진이 산다 —
     사진과 지면 색은 늘 반대로 간다. 사진을 바꾸면 이 두 값도 같이 볼 것. */
  --pc-bg: #000000;          /* 자리 잡은 뒤 (2026-08-30 채린 지정: 파랑 → 검정) */
  --pc-bg-rise: #0046ff;     /* 올라올 때 (DJ Bank 파랑) */
  --pc-ink: #ffffff;
  --pc-track: 200svh;        /* ★ 트랙 길이 ★ 한 화면(100svh)을 뺀 100svh 동안 멈춰 선다 */
  --pc-pad: 4vw;             /* ★ 가로 여백 ★ 지면 좌우와 사진 오른쪽 */
  /* ★ 세로 여백 ★ 사진의 위·아래. 가로와 **수치를 같게 두면 눈에는 더 넓어 보여서**
     시각 보정으로 0.7 배 좁혔다 (2026-08-29 채린 요청). 1440 에서 58 → 40px. */
  --pc-pad-y: calc(var(--pc-pad) * 0.7);
  --pc-pad-x: var(--pc-pad);
  /* ★ 한글 문구 크기 ★ (2026-08-30 채린 지정 "70px, 반응형에 맞춰 변할 수 있게")
     2026-08-30 채린이 값을 직접 지정: **clamp(36px, 4.3vw, 88px)**.
     실제 크기 — 1440 → 61.9px · 1821 → 78.3px · 2048 이상 → 88px(상한).
     내력: 40 → 56 → 60 → 70px(가변, 4.8611vw) → **4.3vw**.
     · 하한 36px — 768(데스크톱 시작 폭)에서 33px 이라 여기에 걸린다.
       모바일은 아래 max-width:767px 블록이 자기 값으로 덮는다.
     ⚠ 크기를 바꾸면 --pc-lead-gap 이 따라온다(아래) — 따로 안 재도 된다. */
  /* ★ 한글 문구는 영문 제목과 **같은 비율로** 움직인다 ★ (2026-08-31 채린 지정)
     전에는 한글만 폭 기준(4.3vw)이고 영문은 높이 기준(36svh)이라, 창을 좁히면
     **한글만 작아지고 영문은 그대로**였다 — 채린 지적.
     → 영문 크기(min(36svh, 31vw))에 **0.191 을 곱한다**. 이 값은 지금 비례를 그대로 옮긴 것이다
       (1440×900 에서 영문 324px · 한글 61.9px = 0.191). 그래서 보통 화면에서는 크기가 안 변한다.
     ⚠ 곱하는 수만 바꾸면 두 글자의 **비례**가 바뀐다. 영문 자체를 키우려면 .partcover__title 쪽을 본다.
     ⚠ 상한(옛 88px)은 뺐다 — 상한에 걸리면 큰 화면에서 다시 비율이 깨진다. 하한 36px 만 남겼다.
     내력: 40 → 56 → 60 → 70px → 4.3vw → **영문 × 0.191**. */
  --pc-lead-size: max(36px, calc(min(36svh, 31vw) * 0.191));
  /* 한글 타이틀 상자 아래끝과 **글자 밑선** 사이의 틈. 사진 아래끝을 글자 밑선에 맞추려면
     문구를 이만큼 더 내려야 한다. 실측 11px(56px · 행간 1.3) = 0.196em 이라,
     크기가 가변이 된 뒤로는 **비율로 잡아 크기를 따라가게** 했다. */
  --pc-lead-gap: calc(var(--pc-lead-size) * 0.196);
  /* ★ 한글 타이틀을 사진 아래끝보다 얼마나 더 올릴지 ★ (2026-08-29 채린 요청)
     0 이면 사진 아래끝과 글자 밑선이 정확히 같은 줄에 선다. */
  --pc-lead-up: 40px;

  position: relative;
  height: var(--pc-track);
}

/* 인트로 표지(.chapter-cover__sticky)와 같은 장치 — 트랙 안에서 한 화면이 붙어 선다.
   ⚠ 여기 sticky 는 앞 지면을 '덮는' 용도가 아니다. 겹치기(margin-top 음수)가 없으므로
     들어올 때는 그냥 흐름대로 올라오고, 화면을 채운 뒤부터 멈춰 선다. */
.partcover__screen {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

/* 바탕 면. 이제 아무 데도 안 붙는다 — 지면과 **함께 스크롤된다**. */
.partcover__panel {
  position: absolute;
  inset: 0;
  /* ★ 파랑으로 올라와 자리 잡으면 검정으로 가라앉는다 ★ (2026-08-30 채린 지정)
     바뀌는 시점은 .is-in 이 붙는 때 = 화면이 거의 다 찬 순간(js 의 IN). */
  background: var(--pc-bg-rise);
  color: var(--pc-ink);
  transition: background-color 0.55s cubic-bezier(0.4, 0, 0.2, 1);   /* 글·사진과 함께 빨라졌다 */
}

.partcover__inner {
  position: absolute;
  inset: 0;
  padding: 5.5svh var(--pc-pad-x);
  box-sizing: border-box;
}

/* ── 제목 "PART II." ───────────────────────────────────────────────────
   ★ 서체는 **히어로 타이틀(DJ Bank)과 같은 것** ★ (2026-08-29 채린 요청)
   --boot-title = 'Arges Trial'(Blaze Type Arges Normal Black 트라이얼), 선언은 css/boot.css 의 :root.
   ⚠ 트라이얼이다 — 배포 전에는 정식 라이선스로 바꿔야 하고, 그때 히어로와 여기가 함께 바뀐다
     (한 토큰을 같이 보기 때문. 따로 두면 두 화면의 영문 서체가 갈린다).
   ⚠ 파일 자체가 Black 이라 weight 는 400 으로 쓴다 — 700/900 을 주면 합성 볼드가 겹친다. */
.partcover__title {
  position: absolute;
  left: var(--pc-pad-x);
  top: 4.5svh;
  margin: 0;
  font-family: var(--boot-title);
  font-weight: 400;
  /* ★ 제목 크기 ★ 화면 높이 기준 (2026-08-30 채린 지정. 28 → 40 → 36svh)
     ⚠ **폭 상한을 함께 둔다** (2026-08-31 채린 "영문 타이틀이 반응형 적용 안 되어 있는 것 같아").
       svh 는 화면 **높이**만 보므로, 창을 좁히거나 세로로 긴 화면(태블릿 세로)에서는
       글자가 그대로 있고 폭만 줄어 "PART III." 가 화면을 가득 메웠다 —
       834×1112 에서 글자 폭이 화면의 85% 였다.
     → 31vw 를 상한으로 걸어 폭이 좁아지면 글자도 같이 작아지게 한다.
       1440×900 같은 보통 비율에서는 svh 쪽이 작아 **지금 크기가 그대로 유지**된다. */
  font-size: min(36svh, 31vw);
  line-height: 0.86;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* ── 아래 문구 네 줄 ─────────────────────────────────────────────────── */
.partcover__lead {
  position: absolute;
  left: var(--pc-pad-x);
  /* 상자 아래끝이 아니라 **글자 밑선**이 사진 아래끝과 같은 줄에 오게 내린다. */
  bottom: calc(var(--pc-pad-y) - var(--pc-lead-gap) + var(--pc-lead-up));
  margin: 0;
  /* ★ 한글 타이틀 규격 ★ (2026-08-29 채린 지정. 전 최대 40px · 1.38 · 700) */
  font-family: var(--font-display);
  font-weight: 600;      /* 2026-08-30 채린 지정 (500 → 600 → 700 → 600) */
  font-size: var(--pc-lead-size);   /* ★ 크기는 .partcover 의 --pc-lead-size 한 곳에서 정한다 ★ */
  line-height: 1.3;      /* 2026-08-30 채린 지정 (1.3 → 1.1 → 다시 1.3) */
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* ── 오른쪽 사진 ───────────────────────────────────────────────────────
   ★ 사진 바꾸는 곳 ★ index.html 의 .partcover__figure 안.
   지금은 파일 없이 **기호를 흩뿌린 검은 판**을 JS 가 그린다(채린 시안 그대로).
   진짜 사진이 생기면 그 자리에 <img> 를 넣고 아래 배경색만 지우면 된다. */
/* 위·아래·오른쪽 여백이 같다. 높이는 그 둘 사이를 채우는 값이라 따로 주지 않는다.
   ⚠ 위·아래는 --pc-pad-y (가로의 0.7 배, 시각 보정). 아래끝은 한글 타이틀의 **글자 밑선**과
     같은 줄에 선다 — 그래서 문구도 같은 --pc-pad-y 를 본다(--pc-lead-gap 참고). */
.partcover__figure {
  position: absolute;
  right: var(--pc-pad);
  top: var(--pc-pad-y);
  bottom: var(--pc-pad-y);
  width: 34vw;
  margin: 0;
  background: #0b0b0b;
  overflow: hidden;
  /* 마스크 — 오른쪽 끝에서 왼쪽으로 열린다(영상에서 새 그림이 나오던 방향).
     JS 가 .is-in 을 붙이면 0 으로 간다. */
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.72s cubic-bezier(0.16, 1, 0.3, 1);   /* 2026-08-29 채린 요청으로 1.1 → 0.72s */
}
/* ⚠ **<picture> 를 함께 늘려야 한다** (2026-08-31, 채린이 보낸 화면에서 잡힌 버그).
   마크업이 `<figure><picture><img></picture></figure>` 라 img 의 `height: 100%` 는
   **picture 의 높이**를 기준으로 잰다. picture 는 기본이 `display: inline` 이라 높이가
   auto — 퍼센트 높이가 풀리지 않고 img 가 제 비율대로 그려진다.
   → 사진(1157×1700)이 세로로 긴 상자를 다 못 채우고 **아래에 검은 띠**가 남았다
     (상자 배경 #0b0b0b 가 그대로 보인 것). 1280×800 에서 약 100px.
   ⚠ `object-fit: cover` 로는 못 고친다 — 그건 상자를 채운 다음의 잘림 방식이지,
     상자 높이를 만들어 주지 않는다. */
.partcover__figure picture {
  display: block;
  width: 100%;
  height: 100%;
}
.partcover__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 마스크로 드러나는 글 ─────────────────────────────────────────────
   한 줄을 상자(.partcover__mask)에 넣고 안쪽 글만 아래에서 밀어 올린다.
   ⚠ 상자에 overflow: hidden 만 주면 **다 올라온 뒤** 글자 위아래가 잘린다(제목은 행간이
     0.86 이라 글자가 줄상자 밖으로 삐져나온다). 그래서 padding 으로 여유를 준다.
   ⚠ 그 여유만큼 숨는 거리도 늘려야 한다 — 110% 로는 padding 만큼(제목 기준 16px)
     글자 윗머리가 상자 안에 남아 올라오기 전부터 보인다. 130% 면 둘 다 넉넉하다. */
.partcover__mask {
  display: block;
  overflow: hidden;
  padding: 0.08em 0.06em;
  margin: -0.08em -0.06em;
}
.partcover__mask > span {
  display: block;
  transform: translateY(130%);
  transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);   /* 2026-08-29 채린 요청으로 0.95 → 0.62s */
}

/* ── 다 올라온 뒤 (js 가 .is-in 을 붙였다 뗀다) ───────────────────────
   ⚠ .is-in 은 **되돌아온다** — 스크롤을 올리면 떼고, 다시 내리면 붙인다
     (2026-08-29 채린 요청. 그전엔 한 번 켜면 끝이었다). */
.partcover__panel.is-in { background: var(--pc-bg); }
.partcover__panel.is-in .partcover__mask > span { transform: none; }
.partcover__panel.is-in .partcover__figure { clip-path: inset(0 0 0 0); transition-delay: 0.06s; }

/* 줄마다 시차. 제목 → 사진 → 문구 순으로 든다(영상과 같은 순서).
   ⚠ 2026-08-29 채린 요청으로 전체를 빠르게 당겼다 — 마지막 줄이 끝나는 시각 1.61 → 0.94초.
   ⚠ 시차는 **.is-in 안에만** 둔다. 밖에 두면 되감을 때도 그 시차대로 하나씩 사라져
     "사라지는 연출"이 따로 생긴다 — 되감기는 즉시 원위치여야 다시 내렸을 때 처음부터 재생된다. */
.partcover__panel.is-in .partcover__title .partcover__mask > span { transition-delay: 0.02s; }
.partcover__panel.is-in .partcover__lead .partcover__mask:nth-child(1) > span { transition-delay: 0.20s; }
.partcover__panel.is-in .partcover__lead .partcover__mask:nth-child(2) > span { transition-delay: 0.26s; }
.partcover__panel.is-in .partcover__lead .partcover__mask:nth-child(3) > span { transition-delay: 0.32s; }
.partcover__panel.is-in .partcover__lead .partcover__mask:nth-child(4) > span { transition-delay: 0.38s; }


/* ── 세로(모바일) ─────────────────────────────────────────────────────
   가로로 나란히 둘 수가 없어 위에서부터 제목 · 사진 · 문구로 쌓는다. */
@media (max-width: 767px) {
  .partcover {
    --pc-pad-x: 24px;
    /* 데스크톱과 **같은 비율**(1440 에서 61.9px ≈ 옛 60px)이라 모바일도 옛 30px 자리로 둔다.
       390 에서 30px 이고, 767 에서 34px 이라 데스크톱 시작값(768 × 4.3vw = 33px)과 이어진다. */
    --pc-lead-size: clamp(24px, 7.7vw, 34px);
  }
  /* 데스크톱과 같은 비율로 줄인다(데스크톱 40svh · 56px). 그대로 쓰면 화면 폭을 넘는다. */
  .partcover__title {
    top: 4svh;
    font-size: 17.1svh;   /* 데스크톱 36svh 와 같은 비율(옛 40svh : 19svh) */
  }
  /* 제목 아래부터 문구 위까지를 사진이 채운다 — 40svh 로는 사진과 문구 사이가 비었다. */
  /* 모바일은 세로로 쌓느라 위·아래를 따로 잡는다(가로 여백만 --pc-pad 와 같다). */
  .partcover__figure {
    right: var(--pc-pad);
    left: var(--pc-pad);
    top: 20svh;
    bottom: auto;
    width: auto;
    height: 52svh;
  }
  .partcover__lead {
    bottom: 5svh;
  }
}

/* 움직임을 줄이는 설정이면 처음부터 완성된 그림으로 둔다. */
@media (prefers-reduced-motion: reduce) {
  .partcover__mask > span,
  .partcover__figure { transition: none; }
  .partcover__mask > span { transform: none; }
  .partcover__figure { clip-path: inset(0 0 0 0); }
  .partcover__panel { background: var(--pc-bg); transition: none; }
}

/* ==========================================================================
 * Part III 간지 — 사진은 가만히, 색 면이 걷힌다 (.partcover--wipe)
 * ==========================================================================
 * 원본: enso.readymag.com/eames/csh-number-nine/ 의 초록 간지.
 *
 * ⚠ **사진은 움직이지도 커지지도 않는다.** 화면을 꽉 채운 채 밑에 깔려 있고,
 *   그 위를 덮은 색 면이 오른쪽부터 걷히면서 사진이 드러난다.
 *   (처음에는 반대로 만들었다 — 사진을 담은 창을 넓히는 방식. 그러면 창이 커질 때
 *    사진이 함께 움직이는 것처럼 보인다는 지적을 받아 뒤집었다. 2026-08-30)
 *
 * ★ 조절 ★ --pc3-bg 색 면 · 걷히는 구간은 js/mod-partcover.js 의 WIPE_FROM / WIPE_TO
 * ========================================================================== */
.partcover--wipe {
  --pc3-bg: #0046ff;
  --pc-bg: #000;             /* 사진이 늦게 오면 검정 (파랑이 비치지 않게) */
  --pc-bg-rise: #000;
}

/* ★ Part III 간지가 걷히는 속도 ★ (2026-08-30 채린 지적 "너무 빨리 지나간다")
 * 속도는 **트랙 길이**로 정한다 — 걷히는 구간의 비율(js/mod-partcover.js 의 WIPE_FROM 0.18 ~
 * WIPE_TO 0.62)은 그대로 두고 굴릴 거리를 늘리면, 색 면이 서 있는 시간·걷히는 시간·
 * 사진만 보는 시간이 **함께** 늘어난다. 200 → 320svh 로 굴릴 거리가 100 → 220svh 가 되어
 * **2.2배 느려진다**: 색 면 정지 40svh · 걷힘 97svh · 사진 83svh (전에는 18 / 44 / 38svh).
 * ⚠ **#part-3 에만** 준다 — Part I 간지도 같은 .partcover--wipe 라, 클래스에 주면 거기까지 느려진다.
 * ★ 더 느리게 ★ 이 값을 키운다. 걷히기 **시작하는 시점**만 옮기려면 js 의 WIPE_FROM 을 본다. */
#part-3 {
  --pc-track: 320svh;
}

/* ① 밑에 깔린 사진 */
.partcover--wipe .partcover__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  /* ⚠ 화질 관련 두 가지 (2026-08-30 채린 지적: 사진이 깨져 보인다)
     · 파일: q86 → **q96 + sharp_yuv** 로 다시 뽑았다(163KB → 456KB).
       무대 사진처럼 **어두운 바탕에 가는 빛줄기**가 있는 그림은 낮은 q 에서 띠가 진다.
     · 확대: 원본이 2400px 인데 2배 화면에서는 2880px 이 필요해 1.2배 늘어난다.
       늘어난 그림이 뭉개지지 않도록 브라우저에 고품질 보간을 요청한다. */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

/* ② 걷히는 색 면. --pc-wipe(0~1)만큼 **오른쪽부터** 잘려 나간다.
   ⚠ clip-path 라서 면 위의 글(제목·문구)도 같이 걷힌다 — 그게 커튼처럼 보이는 핵심이다. */
.partcover--wipe .partcover__curtain {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--pc3-bg);
  clip-path: inset(0 calc(var(--pc-wipe, 0) * 100%) 0 0);
}

/* ⚠ 문구를 캡션 높이만큼 올린다 — 둘 다 왼쪽 아래에 붙어서 그냥 두면 겹친다.
   ★ 한글 문구 ↕ 캡션 사이 ★ --pc3-cap-room — 캡션 아래끝에서 문구 상자 아래끝까지의 거리다.
   여기서 캡션 높이(두 줄 = 36px)를 뺀 만큼이 눈에 보이는 틈이 된다.
   내력: 104px(캡션이 세 줄이던 때) → **60px** (2026-08-30 채린 "마진 너무 심해, 붙여줘").
   ⚠ 캡션이 세 줄로 늘어나면 이 값도 같이 키워야 한다 — 안 그러면 글이 겹친다. */
.partcover--wipe .partcover__lead {
  bottom: calc(var(--pc-pad-y) + var(--pc3-cap-room, 60px));
}

/* 캡션 — 왼쪽 아래 고정. 색 면이 걷혀도 사진 위에 계속 남는다. */
.partcover--wipe .partcover__cap {
  position: absolute;
  left: var(--pc-pad);
  bottom: var(--pc-pad-y);
  margin: 0;
  z-index: 3;
  /* 캡션 줄바꿈은 **마크업의 <br> 만** 정한다. 폭이 좁으면 그 뒤 문장이 저절로 또 접힌다 —
     실제로 `/DJ Bank` 를 둘째 줄 끝에 붙였더니 52ch 를 넘겨 혼자 셋째 줄로 내려갔다
     (2026-08-30 채린 지적). 그래서 넉넉히 준다.
     ★ 캡션 문구를 늘리면 이 값도 함께 볼 것 ★ */
  max-width: 68ch;
  font-family: var(--font-display);
  font-size: 14px;   /* 2026-08-30 채린 지정 (전 12px) */
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.85);
  word-break: keep-all;
}

@media (max-width: 767px) {
  .partcover--wipe .partcover__cap { font-size: 11px; max-width: 26ch; }
}

/* ── Outro 간지 — 걷히는 면이 **검정** ── (2026-08-30 채린 요청)
   Part III 와 같은 장치를 쓰고 색만 바꾼다. */
.partcover--outro {
  --pc3-bg: #000000;
}

/* ── Part I 간지 — 걷히는 면은 하늘색, 글자는 검정 ── (2026-08-30 채린 지정)
   장치는 Part III 와 같고 색만 다르다. 캡션이 붙는다면 그것도 어두운 색이어야 읽힌다. */
#part-1 {
  --pc3-bg: #00AAFF;
  --pc-ink: #000000;
}

/* 사진 위에 검정을 얹는다 — **사진이 40% 로 보이게** (2026-08-30 채린 지정. 내력 20% → 60%).
   뒤가 검정(--pc-bg: #000)이라 "검정 60% 를 덮는다" = "사진 opacity 40%" 와 결과가 같다.
   ⚠ 사진(.partcover__bg)에 opacity 를 주면 **사진 자체가 흐려져** 뒤 배경이 비친다.
     그래서 사진 위에 검은 층을 한 겹 덮는다 — 흰 글자 벌(z:2)보다는 아래다.
   ★ 어둡기 ★ --pc-bg-dim */
#part-1 .partcover__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  /* ⚠ z-index 는 **0** 이어야 한다. 1 로 두면 색 면(.partcover__curtain, z:1)보다 뒤에
     그려지지 않고 그 위에 얹혀서 **하늘색까지 어두워진다**(2026-08-30 채린 지적).
     0 이면 사진(z:0, 먼저 그려짐) 위·색 면 아래에 놓여 사진만 어두워진다. */
  z-index: 0;
  background: rgba(0, 0, 0, var(--pc-bg-dim, 0.6));
  pointer-events: none;
}

/* 문구 높이를 **Part II 간지와 똑같이** 맞춘다 (2026-08-30 채린 요청).
   커튼형 간지(.partcover--wipe)는 캡션 자리를 비우느라 문구를 올려 두는데,
   이 간지엔 캡션이 없어서 그럴 이유가 없다 → Part II 가 쓰는 기본 식을 그대로 쓴다.
   ⚠ 캡션을 넣게 되면 이 규칙을 지우면 된다(그러면 다시 캡션 자리만큼 올라간다). */
#part-1 .partcover__lead {
  bottom: calc(var(--pc-pad-y) - var(--pc-lead-gap) + var(--pc-lead-up));
}
#part-1 .partcover__cap {
  color: rgba(0, 0, 0, 0.75);
}

/* ── 같은 글의 '흰 벌' ── (2026-08-30 채린 요청, Part I 간지)
 * 색 면 위의 글은 검정, **사진 위로 드러난 쪽은 흰색**이 되게 한 벌을 더 얹는다.
 * 두 벌은 정확히 같은 자리에 있고, 서로 **반대쪽만** 보이게 잘려 있다.
 *   커튼(검정 글) : inset(0 wipe% 0 0)        — 왼쪽(아직 안 걷힌 쪽)
 *   흰 벌         : inset(0 0 0 (1-wipe)%)    — 오른쪽(사진이 드러난 쪽)
 * ⚠ 그래서 경계에서 글자가 검정 → 흰색으로 **정확히 이어져** 보인다.
 *   두 벌의 글자·자리가 어긋나면 그 자리에서 겹치거나 끊긴다. */
#part-1 .partcover__over {
  position: absolute;
  inset: 0;
  z-index: 2;                       /* 사진 위, 캡션 아래 */
  color: #ffffff;
  pointer-events: none;
  clip-path: inset(0 0 0 calc((1 - var(--pc-wipe, 0)) * 100%));
}

/* ── 파트 III 의 흰 벌은 **폰에서만** 쓴다 ── (2026-09-02 채린 "간지 1이랑 동일하게")
   데스크톱 파트 III 는 예전부터 글이 커튼과 **함께 걷혀 사라지는** 연출이다 — 그건 안 건드린다.
   폰에서만 아래 `html.is-mobile-static #part-3 .partcover__over` 가 이 규칙을 이기고 켜진다. */
#part-3 .partcover__over { display: none; }

/* Part II 간지 문구만 행간을 좁힌다 (2026-08-30 채린 지정 1.3 → 1.2).
   ⚠ **#part-2 에만** 준다 — 네 줄짜리라 다른 간지(두 줄)와 사정이 다르다. */
#part-2 .partcover__lead {
  line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════════════════════
   모바일 — 붙어 서는 화면이 **보이는 화면 전체**를 덮게 한다 (2026-08-30)
   ══════════════════════════════════════════════════════════════════════════
   ⚠ 증상: 폰에서 간지 아래에 검은 띠가 남고, 글이 화면 밖으로 밀려 올라간 것처럼 보였다.
   ⚠ 원인: `100svh` 는 **주소창이 보이는 상태의 높이**다(고정값). 그런데 스크롤을 내리면
     주소창이 접혀 실제로 보이는 화면은 `100lvh`(= svh + 90px 안팎)가 된다.
     붙어 선 화면이 90px 짧으니 그만큼 아래가 안 덮여 뒤가 비쳤다.
   → 덮개는 `lvh` 로 준다. 간지에는 스크롤해서 들어오므로 그 시점엔 주소창이 이미 접혀 있고,
     lvh 가 곧 보이는 화면과 같다.
   ⚠ 데스크톱에서는 lvh = svh 라 값이 같지만, 손대는 범위를 좁히려고 모바일에만 준다.
   ⚠ 진행도 계산은 이 높이를 **실측**하므로(js/mod-partcover.js) 여기만 고치면 따라온다. */
@media (max-width: 767px) {
  .partcover__screen { height: 100lvh; }
}

/* ══════════════════════════════════════════════════════════════════════════
   모바일 간지 — 붙어 서지 않고 그냥 지나간다 (2026-08-30 채린 요청)
   ══════════════════════════════════════════════════════════════════════════
   ⚠ 이건 **자리표시**다. 채린이 간지 시안을 주면 이 블록을 그 디자인으로 갈아 끼운다.
     지금 목적은 하나 — 폰에서 스크롤을 망가뜨리던 sticky 를 걷어내는 것.
   ⚠ 연출을 끄는 건 js/mod-partcover.js 의 is-mobile-static 가드가 한다.
     JS 가 안 도니 **JS 가 붙여 주던 완성 상태를 여기서 직접 줘야 한다** —
     안 그러면 글자가 안 보이고(마스크가 안 열림) 커튼이 안 걷힌 채로 남는다. */
@media (max-width: 767px) {
  /* 트랙에서 붙어 서던 한 화면을 빼고, 지면 자체를 한 화면 높이로 만든다 */
  html.is-mobile-static .partcover {
    height: auto;
    /* 커튼형 간지는 걷힘이 끝난 상태(사진이 다 드러난 상태)로 둔다 */
    --pc-wipe: 1;
  }
  html.is-mobile-static .partcover__screen {
    position: static;
    /* ⚠ 100lvh 가 아니라 **얼어붙은 px**(js/boot.js 의 --vh100) 이다.
       카카오 인앱 브라우저는 lvh 도 툴바를 따라 바꿔서, 뷰포트 단위를 쓰면
       지면이 숨쉬며 문서 높이가 654px 씩 오르내린다 → 스크롤이 턱턱 걸린다. */
    height: var(--vh100, 100lvh);
  }

  /* JS 가 .is-in 으로 주던 '다 올라온 상태'를 처음부터 준다.
     ⚠ 셋을 다 줘야 한다 — 바탕색 · 글자 마스크 · 사진 클립. 하나라도 빠지면 안 보인다. */
  html.is-mobile-static .partcover__panel {
    background: var(--pc-bg);
  }
  html.is-mobile-static .partcover__mask > span {
    transform: none;
    transition: none;
  }
  html.is-mobile-static .partcover__figure {
    clip-path: inset(0 0 0 0);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   모바일 Part I 간지 — 시안대로 (2026-08-31 채린 시안 `Frame 632472.png`)
   ══════════════════════════════════════════════════════════════════════════
   커튼이 걷히는 연출 대신 **하늘색 지면 위에 제목 · 사진 · 문구가 세로로 쌓인다.**
   (연출을 끄는 건 js/mod-partcover.js 의 is-mobile-static 가드)

   ┌ 시안(390) 실측 — 글자는 '획' 기준 ──────────────────────────────────
   │  배경        #00AAFF (지금 --pc3-bg 와 같은 값)
   │  PART I.     획 y 48~160.7 (높이 113) · 왼쪽 27.3
   │  사진        y 198~507.7 · x 24~365.7 (342×310)
   │  문구 3줄    획 y 553.3 부터 · 획 높이 31.7 · 줄 간격 43 · 왼쪽 25
   └────────────────────────────────────────────────────────────────────
   ★ 시안 1px = --m ★ (모바일 표지와 같은 방식. 390 → 1px · 430 이상 1.1px 고정)
   ⚠ 글자 크기는 **획 높이**로 맞췄다. 시안 쪽 서체가 이보다 넓어서 가로 폭은 시안보다
     10~13% 짧다 — 폭까지 맞추려면 크기를 그만큼 올려야 하는데 그러면 획이 두꺼워진다. */
@media (max-width: 767px) {
  html.is-mobile-static #part-1 {
    --m: min(0.25641vw, 1.1px);
    /* 2026-08-31 채린이 검사창에서 직접 잡은 값이다(시안 실측값에서 조정).
       내력: title 147→170 · title-ink 48→64→78 · img-top 198→206→219
             · lead-ink 553.3→586.3→600.3 · lead-gap2 43→42 · height 700→740→766 */
    --p1-title: 170;      /* PART I. 글자 크기 */
    --p1-title-ink: 78;   /* 그 획 위끝 */
    --p1-pad-x: 24;       /* 좌우 여백 */
    --p1-img-top: 219;
    --p1-img-h: 310;
    --p1-lead: 35.4;      /* 문구 글자 크기 (획 31.7 ÷ 0.895) */
    /* 첫 줄 획 위끝. 2026-09-02 채린 "이 구간 높이를 좀 줄이고 싶어" → 600.3 → **484**.
       제목과 문구 사이의 빈 공간만 줄인 값이라 글자 크기·좌우 자리는 그대로다.
       내력: 600.3 → 484 → **414**(높이 580 에 맞춘 값). */
    --p1-lead-ink: 414;
    --p1-lead-gap2: 42;   /* 줄 간격 */

    /* 지면 높이. 2026-09-02 채린 요청으로 766 → 650 → **580**(390 에서 186px 짧아졌다).
       ⚠ --p1-lead-ink 와 **짝이다** — 아래 여백 40px 을 지키려면 둘을 같은 만큼 옮긴다
         (문구 3줄 높이 126 + 40 = 166 을 높이에서 빼면 --p1-lead-ink 가 나온다).
       ⚠ 파트 III 도 766 인데 그건 그대로다(아래 #part-3 블록). */
    height: calc(580 * var(--m));
    /* ★ 검정으로 들어와 스크롤하면 파랑이 된다 ★ (2026-08-31 채린 요청)
       바뀌는 시점은 .is-in 이 붙는 때 = 지면이 35% 보이는 순간
       (js/mod-partcover.js 의 IntersectionObserver).
       ⚠ **글자색도 함께 뒤집어야 한다** — 문구와 제목이 검정이라 검은 바닥에서는 안 보인다.
         검은 동안에는 흰 글자, 파랑이 되면 검은 글자다.
       ★ 들어올 때 색 ★ --pc-bg-rise (이 지면에서는 #000) */
    /* ★ 2026-09-02 부터 이 지면은 **데스크톱과 같은 커튼형**이다 ★ (채린 "웹처럼 하늘색 → 사진")
       색은 아래 `.partcover__curtain`(하늘색 면)이 갖고, 그 면이 스크롤을 따라 걷히며 사진이 드러난다.
       지면 자체는 사진이 오기 전 바탕일 뿐이라 검정 고정이다.
       ⚠ js/mod-bgwash.js 의 `#part-1` 항목은 **지웠다** — 커튼이 색을 맡으므로 둘이 겹치면
         지면색과 커튼색이 따로 놀아 경계가 두 겹으로 보인다.
       ★ 바탕을 **검정이 아니라 커튼과 같은 하늘색**으로 둔다 (2026-09-02).
         사진이 한 프레임이라도 못 그려지면 이 바탕이 그대로 비치는데, 검정이면 그게
         "검은 막이 휙 지나간다"로 보였다(채린). 하늘색이면 커튼이 그대로 있는 것처럼 보여 안 튄다. */
    background: var(--pc3-bg, #00aaff);
  }

  html.is-mobile-static #part-1 .partcover__screen,
  html.is-mobile-static #part-1 .partcover__panel {
    position: absolute;
    inset: 0;
    height: auto;
    background: none;
  }

  /* ★ 커튼(하늘색 면)과 흰 글자 벌을 **데스크톱과 똑같이** 쓴다 ★ (2026-09-02 채린)
     위쪽 `.partcover--wipe .partcover__curtain` 규칙이 그대로 일한다 —
     `clip-path: inset(0 calc(var(--pc-wipe) * 100%) 0 0)` 로 오른쪽부터 걷힌다.
     `--pc-wipe` 는 js/mod-partcover.js 가 스크롤 진행도로 넣는다(폰에서도 이제 넣는다).
     ⚠ 2026-08-30 ~ 09-02 사이에는 이 셋을 껐었다(커튼 색 없앰 · 흰 벌 숨김 · inner static).
     ⚠ 커튼은 `position:absolute; inset:0` 이라 그 안의 글자는 **커튼 상자 기준**으로 앉는다 —
       흰 벌(.partcover__over)도 같은 상자·같은 글자라 두 벌이 정확히 겹친다. 어긋나면 경계에서 글자가 겹쳐 보인다. */
  html.is-mobile-static #part-1 .partcover__curtain {
    background: var(--pc3-bg, #00aaff);
    /* ⚠ **`will-change` · `contain` · `translateZ` 를 여기 쓰지 말 것** (2026-09-02).
       스크롤이 걸리는 걸 줄이려고 커튼·흰 벌에 `will-change: clip-path; contain: paint` 를,
       사진에 `translateZ(0)` 를 줬더니 **검은 화면이 스쳐 지나갔다**(채린이 두 번 신고).
       세 값 모두 그 요소를 별도 GPU 층으로 올리는데, clip-path 가 매 프레임 바뀌는 층은
       갱신되는 순간 빈(검은) 상태가 그대로 비친다. 폰에서 특히 잘 보인다.
       무거움은 **큰 사진**이 원인이었고, 그건 폰용 800px 판(assets/img/m/)으로 해결했다. */
  }

  /* ── PART I. ── 왼쪽 정렬. 획 위끝을 시안 자리에 앉힌다.
     line-height:1 상자의 위끝에서 획 위끝까지는 (어센더 − 캡높이) × 크기 = 0.22em 이다
     (모바일 표지와 같은 보정). */
  html.is-mobile-static #part-1 .partcover__title {
    position: absolute;
    left: calc(var(--p1-pad-x) * var(--m));
    right: auto;
    top: calc((var(--p1-title-ink) - var(--p1-title) * 0.22) * var(--m));
    margin: 0;
    font-size: calc(var(--p1-title) * var(--m));
    line-height: 1;
    /* ⚠ **색을 여기서 주면 안 된다** (2026-09-02). 커튼형이 되면서 글자가 두 벌이 됐는데,
       여기에 직접 주면 흰 벌(.partcover__over → color:#fff)의 상속까지 덮어 **양쪽 다 검정**이
       된다(실측). 커튼 안은 .partcover__panel 의 --pc-ink(#000)를, 흰 벌은 자기 흰색을 물려받는다. */
  }

  /* ── 사진 ── **지면을 꽉 채운다** (2026-09-02 채린 시안. 그전에는 342×310 네모 상자였다)
     위쪽 `.partcover--wipe .partcover__bg`(inset:0 · object-fit:cover)를 그대로 쓰므로
     여기서 따로 줄 게 없다. 되돌리려면 옛 네모 상자 값(--p1-img-top/-h)을 다시 쓰면 된다. */

  /* ── 문구 세 줄 ── 줄바꿈은 마크업의 <br class="br-mobile"> 가 한 번 더 넣는다.
     한글(프리텐다드)은 획이 위에서 0.895em 를 차지하고, line-height:1 상자 위끝에서
     획 위끝까지는 약 0.09em 이다. */
  html.is-mobile-static #part-1 .partcover__lead {
    position: absolute;
    left: calc(var(--p1-pad-x) * var(--m));
    right: calc(var(--p1-pad-x) * var(--m));
    bottom: auto;
    top: calc((var(--p1-lead-ink) - var(--p1-lead) * 0.09) * var(--m));
    margin: 0;
    font-size: calc(var(--p1-lead) * var(--m));
    line-height: calc(var(--p1-lead-gap2) / var(--p1-lead));
    /* ⚠ 색은 상속에 맡긴다 — 위 제목 주석 참고. */
  }
  /* 사진 위에 얹던 검은 막은 지면이 하늘색이라 필요 없다 */
  /* ★ 사진 위 검은 막을 되살린다 ★ (2026-09-02 채린 "여기도 오퍼시티 먹여줘, 50 정도")
     커튼형이 되면서 사진이 지면을 꽉 채우게 됐다 — 그냥 두면 흰 글자 벌이 사진에 묻힌다.
     **0.4** = 사진이 **60% 로 보인다**(채린 "오퍼시티 60"). 내력: 0.5 → 0.6(더 어두워져 "검정만
     보인다"는 말이 나왔다) → **0.4**.
     ⚠ 이 사진은 우주 배경이라 원래도 어둡다 — 막을 올리면 걷힌 뒤가 통째로 검게 보인다. 위쪽 `#part-1 .partcover__panel::after`
     규칙이 그대로 일하고, 여기서는 어둡기만 폰 값으로 덮는다.
     ⚠ 2026-08-30 ~ 09-02 에는 이 막을 껐었다(그때는 지면이 하늘색이고 사진이 작은 네모였다).
     ★ 조절하는 곳 ★ 아래 0.4 (1 에 가까울수록 사진이 어두워진다). */
  /* ★ 사진을 어둡게 — **막이 아니라 사진 자체에** ★ (2026-09-02)
     ⚠ `.partcover__panel::after`(검은 막)를 폰에서 쓰면 안 된다. 그 막은 사진 위·커튼 아래에
       놓이라고 z-index:0 을 주지만 폰에서는 지켜지지 않아 **하늘색 커튼까지 덮였다** —
       채린이 본 '하늘색 → 진한 파랑 → 사진' 의 가운데 색이 그것이다
       (실측 rgb(3,94,153) = 하늘색 rgb(0,158,253) × 0.6). 2026-08-30 에도 같은 일이 있었다.
     → `filter: brightness()` 는 **그 요소에만** 걸린다. 층 순서와 무관해 커튼이 절대 안 어두워진다.
     ★ 조절하는 곳 ★ 아래 0.6 (1 이면 원본 밝기, 낮을수록 어둡다). */
  html.is-mobile-static #part-1 .partcover__panel::after { display: none; }
  html.is-mobile-static #part-1 .partcover__bg { filter: brightness(0.6); }
}

/* ── 모바일 Part I — 스크롤에 따라 하나씩 나온다 ── (2026-08-31 채린 요청)
 * 순서: 타이틀(PART I.) → 사진 → 한글 문구.
 * 셋 다 **자기 자신이 화면에 들어오는 것**을 신호로 쓴다(js/mod-partcover.js 의 watch).
 * 위에서부터 놓여 있으니 스크롤을 내리면 저절로 이 순서가 된다.
 * ⚠ 한 번 나오면 그대로 둔다 — 지나간 자리가 되돌아가면 오류로 읽힌다(인트로 표지와 같은 판단).
 * ⚠ 숨기는 규칙은 html.is-mobile-static 안에만 둔다. 그 클래스는 JS 가 붙이므로
 *   JS 가 죽으면 아무것도 안 숨겨진다(글·사진이 사라지는 사고가 안 난다). */
@media (max-width: 767px) {
  /* ★ 사진(.partcover__bg)은 이 목록에서 뺀다 ★ (2026-09-02)
     커튼형이 되면서 사진을 드러내는 일은 **커튼 하나만** 맡는다.
     여기서 사진에도 따로 연출을 주면 **같은 구간에 연출이 둘**이 된다. 아래 ③ 주석 참고. */
  html.is-mobile-static #part-1 .partcover__title,
  html.is-mobile-static #part-1 .partcover__lead {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.33, 0, 0, 1);
  }
  html.is-mobile-static #part-1 .partcover__title.is-shown,
  html.is-mobile-static #part-1 .partcover__lead.is-shown {
    opacity: 1;
    transform: none;
  }
}

/* ── 모바일 Part I 글자색 — 배경과 반대로 ── (2026-08-31)
 * 검은 바닥에서는 흰 글자, 파랑이 되면 검은 글자.
 * ⚠ **이 블록이 위쪽 제목·문구 규칙보다 뒤에 있어야 한다.** 그 규칙들이 color: var(--pc-ink)
 *   (검정)를 갖고 있어서, 우선순위가 같으면 뒤에 오는 쪽이 이긴다. 앞에 뒀다가 한 번 안 먹었다. */
@media (max-width: 767px) {
  /* ★ 글자색은 **두 벌**이 맡는다 ★ (2026-09-02, 데스크톱과 같은 방식)
     커튼(하늘색) 위의 글은 **검정**, 그 아래 사진 위로 드러나는 흰 벌(.partcover__over)은 흰색이다.
     커튼이 걷히는 경계에서 글자색이 검정 → 흰색으로 정확히 이어진다.
     ⚠ 그전에는 js/mod-bgwash.js 의 `--wash-ink` 로 글자색 하나를 스크롤 따라 보간했다.
       커튼형이 되면서 그 방식은 걷어냈다(bgwash 의 #part-1 항목도 함께 지웠다).
     ⚠ 흰 벌 쪽은 `#part-1 .partcover__over { color: #fff }`(위쪽 데스크톱 규칙)가 맡으므로
       여기서 다시 칠하면 안 된다 — 그래서 **커튼 안쪽만** 골라 검정을 준다. */
  /* (커튼 안 글자는 .partcover__panel 의 --pc-ink 를, 흰 벌은 .partcover__over 의 #fff 를
     각각 물려받는다 — 따로 칠할 것이 없다.) */
}

/* ══════════════════════════════════════════════════════════════════════════
   모바일 Part II 간지 — Part I 과 **같은 규격·같은 인터랙션** (2026-08-31 채린 요청)
   ══════════════════════════════════════════════════════════════════════════
   위 `모바일 Part I 간지` 블록과 **수치가 같다**(--m · 여백 · 제목 · 사진 상자 · 문구).
   다른 점은 셋뿐이다.
     ① 색 — 바뀌는 방향이 반대다. Part I 은 검정 → 하늘색, **여기는 파랑 → 검정**
        (2026-08-31 채린 "#0046FF > 검정으로 배경 변경"). 장치는 같다(.is-in).
        바닥이 파랑이든 검정이든 흰 글자가 읽히므로 **글자색은 안 뒤집는다**.
     ② 사진이 `.partcover__bg` 가 아니라 **`.partcover__figure > img`** 다.
        Part II 는 커튼형(.partcover--wipe)이 아니라서 마크업이 다르다 — 데스크톱을 건드리지
        않으려고 마크업은 그대로 두고 **선택자만 바꿔** 같은 자리에 앉혔다.
     ③ 문구가 **네 줄**이라(Part I 은 세 줄) 지면이 한 줄만큼 길다: 766 + 42 = **808**.
   ⚠ 여기 수치를 고치면 Part I 과 갈라진다 — 두 간지를 같이 볼 것.
   ★ 나오는 순서 ★ 제목 → 사진 → 문구 (js/mod-partcover.js 의 모바일 분기가 신호를 준다) */
@media (max-width: 767px) {
  html.is-mobile-static #part-2 {
    --m: min(0.25641vw, 1.1px);
    /* Part I(--p1-*)과 같은 값 */
    --p2-title: 170;      /* PART II. 글자 크기 */
    --p2-title-ink: 78;   /* 그 획 위끝 */
    --p2-pad-x: 24;       /* 좌우 여백 */
    --p2-img-top: 219;
    --p2-img-h: 310;
    --p2-lead: 35.4;      /* 문구 글자 크기 */
    --p2-lead-ink: 600.3; /* 첫 줄 획 위끝 */
    --p2-lead-gap2: 42;   /* 줄 간격 */

    height: calc(808 * var(--m));   /* 문구 네 줄 = Part I(766) + 한 줄(42) */

    /* ★ 파랑으로 들어와 스크롤하면 검정이 된다 ★ (2026-08-31 채린 "#0046FF > 검정으로 배경 변경")
       Part I 과 **같은 장치**다 — 바뀌는 시점은 .is-in 이 붙는 때 = 지면이 화면 가운데 띠에
       들어오는 순간(js/mod-partcover.js 의 rootMargin -20%).
       색만 반대다: Part I 은 검정 → 하늘색, 여기는 **파랑(--pc-bg-rise #0046ff) → 검정(--pc-bg)**.
       ⚠ **글자색은 안 뒤집는다** — 파랑에서도 검정에서도 흰 글자가 읽힌다
         (Part I 은 하늘색 바닥이라 검은 글자로 뒤집어야 했다). */
    /* ★ 색은 js/mod-bgwash.js ★ 내리면 파랑 → 검정, 올리면 검정 → 파랑. */
    background: var(--wash-bg, var(--pc-bg-rise, #0046ff));
  }

  html.is-mobile-static #part-2 .partcover__screen,
  html.is-mobile-static #part-2 .partcover__panel {
    position: absolute;
    inset: 0;
    height: auto;
    background: none;   /* 색은 지면이 갖는다 */
  }
  html.is-mobile-static #part-2 .partcover__inner { position: static; }

  /* ── PART II. ── 획 위끝을 Part I 과 같은 자리에. 상자 위끝 → 획 위끝 = 0.22em */
  html.is-mobile-static #part-2 .partcover__title {
    position: absolute;
    left: calc(var(--p2-pad-x) * var(--m));
    right: auto;
    top: calc((var(--p2-title-ink) - var(--p2-title) * 0.22) * var(--m));
    margin: 0;
    font-size: calc(var(--p2-title) * var(--m));
    line-height: 1;
    color: #fff;
  }

  /* ── 사진 ── 오른쪽에 세워 두던 것을 Part I 과 같은 네모 상자로.
     ⚠ 데스크톱의 `top`+`bottom` 이 남아 있으면 높이가 그쪽에 끌려간다 → 둘 다 auto 로 지운다. */
  html.is-mobile-static #part-2 .partcover__figure {
    position: absolute;
    inset: auto;
    left: calc(var(--p2-pad-x) * var(--m));
    right: auto;
    top: calc(var(--p2-img-top) * var(--m));
    bottom: auto;
    width: calc(100% - 2 * var(--p2-pad-x) * var(--m));
    height: calc(var(--p2-img-h) * var(--m));
    background: none;
  }
  html.is-mobile-static #part-2 .partcover__figure img { object-fit: cover; }

  /* ── 문구 네 줄 ── 한글(프리텐다드) 상자 위끝 → 획 위끝 ≈ 0.09em */
  html.is-mobile-static #part-2 .partcover__lead {
    position: absolute;
    left: calc(var(--p2-pad-x) * var(--m));
    right: calc(var(--p2-pad-x) * var(--m));
    bottom: auto;
    top: calc((var(--p2-lead-ink) - var(--p2-lead) * 0.09) * var(--m));
    margin: 0;
    font-size: calc(var(--p2-lead) * var(--m));
    line-height: calc(var(--p2-lead-gap2) / var(--p2-lead));
    color: #fff;
  }
}

/* ── 모바일 Part II — 스크롤에 따라 하나씩 나온다 ── (Part I 과 같은 값)
 * ⚠ 숨기는 규칙은 html.is-mobile-static 안에만 둔다 — JS 가 죽으면 아무것도 안 숨는다. */
@media (max-width: 767px) {
  html.is-mobile-static #part-2 .partcover__title,
  html.is-mobile-static #part-2 .partcover__figure,
  html.is-mobile-static #part-2 .partcover__lead {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.55s ease var(--pc-in-delay, 0s),
      transform 0.7s cubic-bezier(0.33, 0, 0, 1) var(--pc-in-delay, 0s);
  }
  /* 순서 — 사진 먼저, 그 다음 타이틀·문구 (2026-09-01 채린. Part I 과 같은 값) */
  html.is-mobile-static #part-2 .partcover__figure { --pc-in-delay: 0s; }
  html.is-mobile-static #part-2 .partcover__title { --pc-in-delay: 0.22s; }
  html.is-mobile-static #part-2 .partcover__lead { --pc-in-delay: 0.4s; }
  html.is-mobile-static #part-2 .partcover__title.is-shown,
  html.is-mobile-static #part-2 .partcover__figure.is-shown,
  html.is-mobile-static #part-2 .partcover__lead.is-shown {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   모바일 Part III 간지 — **파트 I 과 똑같은 커튼형** (2026-09-02 채린 "간지 1이랑 동일하게")
   ══════════════════════════════════════════════════════════════════════════
   ★ 2026-09-02 이전에는 정적이었다 ★ 파랑 지면 위에 제목 · 네모 사진(342×310) · 문구가
     세로로 쌓이고, 사진만 오른쪽에서 열렸다. 지금은 **파트 I 과 같은 장치**다 —
     사진이 지면을 꽉 채운 채 가만히 있고, 그 위의 색 면(.partcover__curtain)이 스크롤을
     따라 오른쪽부터 걷힌다. 진행도(--pc-wipe)는 js/mod-partcover.js 의 모바일 커튼이 넣는다.
   수치(--p3-*)·구간·연출은 **전부 파트 I(--p1-*)과 같은 값**이다. 다른 점은 셋뿐이다.
     ① 색 — 커튼이 **파랑 #0046ff**(파트 I 은 하늘색 #00AAFF). 파랑 위에서도 사진 위에서도
        흰 글자가 읽혀서 **글자색은 두 벌 다 흰색**이다(파트 I 은 커튼 위만 검정으로 뒤집는다).
     ② **캡션을 뺀다**(2026-08-31 채린, 모바일만). 데스크톱은 그대로 남는다.
     ③ 사진이 **폰 전용 세로판**이다(assets/img/part3-visual-m.jpg) — 가로판을 꽉 채우면
        좌우가 크게 잘린다. 마크업의 `<picture>` + media 주석 참고.
   ⚠ 여기 수치를 고치면 파트 I 과 갈라진다 — 두 간지를 같이 볼 것.
   ⚠ js/mod-bgwash.js 의 `#part-3` 항목은 **지웠다** — 색을 커튼이 맡으므로 지면색까지
     따로 칠하면 둘이 따로 놀아 경계가 두 겹으로 보인다(파트 I 때와 같은 이유). */
@media (max-width: 767px) {
  html.is-mobile-static #part-3 {
    --m: min(0.25641vw, 1.1px);
    /* 파트 I(--p1-*)과 같은 값 */
    --p3-title: 170;
    --p3-title-ink: 78;
    --p3-pad-x: 24;
    --p3-lead: 35.4;
    --p3-lead-ink: 464;   /* 첫 줄 획 위끝. 높이 630 에 맞춘 값(내력: 414 → 464) */
    --p3-lead-gap2: 42;

    /* 지면 높이 **630** (2026-09-02 채린 "좀만 크게". 내력: 766 → 580 → 630.
       파트 I 은 580 그대로다 — 이제 두 지면의 높이가 다르다).
       ⚠ --p3-lead-ink 와 **짝이다** — 아래 여백 40px 을 지키려면 둘을 같은 만큼 옮긴다
         (문구 3줄 높이 126 + 40 = 166 을 높이에서 빼면 --p3-lead-ink 가 나온다).
       ⚠ 문구는 마크업이 두 줄이지만 **화면에서는 세 줄**이 된다 —
         "비즈니스 혁신을 가속화하는" 이 342px 폭(35.4px 글자)에 안 들어가 저절로 접힌다. */
    height: calc(630 * var(--m));

    /* ★ 바탕은 **커튼과 같은 파랑** ★ (파트 I 과 같은 판단, 2026-09-02)
       사진이 한 프레임이라도 못 그려지면 이 바탕이 그대로 비치는데, 검정이면 그게
       "검은 막이 휙 지나간다"로 보인다. 커튼색과 같으면 커튼이 그대로 있는 것처럼 보여 안 튄다. */
    background: var(--pc3-bg, #0046ff);
  }

  html.is-mobile-static #part-3 .partcover__screen,
  html.is-mobile-static #part-3 .partcover__panel {
    position: absolute;
    inset: 0;
    height: auto;
    background: none;
  }

  /* ★ 커튼(파랑 면)과 흰 글자 벌을 **데스크톱과 똑같이** 쓴다 ★ (2026-09-02, 파트 I 과 같다)
     위쪽 `.partcover--wipe .partcover__curtain` 규칙이 그대로 일한다 —
     `clip-path: inset(0 calc(var(--pc-wipe) * 100%) 0 0)` 로 오른쪽부터 걷힌다.
     ⚠ **`will-change` · `contain` · `translateZ` 를 여기 쓰지 말 것** — 파트 I 에서 그 셋이
       **검은 화면이 스쳐 지나가는** 사고를 냈다(위 파트 I 블록 주석 참고). */
  html.is-mobile-static #part-3 .partcover__curtain {
    background: var(--pc3-bg, #0046ff);
  }

  /* 흰 벌 — 데스크톱에서는 꺼 뒀다(`#part-3 .partcover__over { display:none }`). 폰에서만 켠다.
     커튼과 **반대쪽**만 보이게 잘라, 사진이 드러난 쪽에 같은 글이 이어진다. */
  html.is-mobile-static #part-3 .partcover__over {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    color: #fff;
    pointer-events: none;
    clip-path: inset(0 0 0 calc((1 - var(--pc-wipe, 0)) * 100%));
  }

  /* ★ 캡션은 폰에서 뺀다 ★ (2026-08-31 채린) — 지우지 말고 숨기기만 한다(데스크톱이 쓴다) */
  html.is-mobile-static #part-3 .partcover__cap { display: none; }

  html.is-mobile-static #part-3 .partcover__title {
    position: absolute;
    left: calc(var(--p3-pad-x) * var(--m));
    right: auto;
    top: calc((var(--p3-title-ink) - var(--p3-title) * 0.22) * var(--m));
    margin: 0;
    font-size: calc(var(--p3-title) * var(--m));
    line-height: 1;
    color: #fff;
  }

  /* ── 사진 ── **지면을 꽉 채운다** (2026-09-02. 그전에는 342×310 네모 상자였다)
     위쪽 `.partcover--wipe .partcover__bg`(inset:0 · object-fit:cover)를 그대로 쓰므로
     자리는 따로 줄 게 없다.
     ★ 어둡기 ★ (채린 "이미지에는 오퍼시티 넣어줘" → "좀 더 낮춰줘") — **brightness(0.45)**.
       내력: 0.6(파트 I 과 같은 값) → **0.45**. 파트 I 은 0.6 그대로다.
     ⚠ 검은 막(`.partcover__panel::after`)을 폰에서 쓰면 안 된다 — z-index 가 안 지켜져
       **커튼(파랑)까지 덮인다**(파트 I 에서 두 번 당했다). `filter` 는 그 요소에만 걸린다.
     ★ 조절하는 곳 ★ 아래 0.6 (1 이면 원본 밝기, 낮을수록 어둡다). */
  html.is-mobile-static #part-3 .partcover__bg { filter: brightness(0.45); }

  html.is-mobile-static #part-3 .partcover__lead {
    position: absolute;
    left: calc(var(--p3-pad-x) * var(--m));
    right: calc(var(--p3-pad-x) * var(--m));
    bottom: auto;
    top: calc((var(--p3-lead-ink) - var(--p3-lead) * 0.09) * var(--m));
    margin: 0;
    font-size: calc(var(--p3-lead) * var(--m));
    line-height: calc(var(--p3-lead-gap2) / var(--p3-lead));
    color: #fff;
  }
}

/* ── 모바일 Part III — 스크롤에 따라 하나씩 나온다 ── (Part I 과 같은 값)
 * ★ 사진(.partcover__bg)은 이 목록에서 뺐다 ★ (2026-09-02 커튼형이 되면서)
 *   사진을 드러내는 일은 **커튼 하나만** 맡는다 — 여기서 사진에도 따로 연출을 주면
 *   같은 구간에 연출이 둘이 되어 그 사이에 빈 띠가 생긴다(파트 I 에서 실측한 사고). */
@media (max-width: 767px) {
  html.is-mobile-static #part-3 .partcover__title,
  html.is-mobile-static #part-3 .partcover__lead {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.33, 0, 0, 1);
  }
  html.is-mobile-static #part-3 .partcover__title.is-shown,
  html.is-mobile-static #part-3 .partcover__lead.is-shown {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   모바일 파트 간지 등장 — **데스크톱과 같은 방식으로** (2026-08-31 채린 요청)
   ══════════════════════════════════════════════════════════════════════════
   그전에는 셋 다 통째로 흐려졌다 나타났다(opacity + translateY 24px).
   데스크톱은 다르다 — 글은 **마스크가 열리며 제자리에서 밀려 올라오고**, 사진은
   **오른쪽 끝에서 왼쪽으로 열린다**. 그 방식을 폰에도 그대로 쓴다.
   순서는 **사진 → 제목 → 문구**다 (2026-09-01 채린. 셋이 한 신호로 켜지고 delay 가 순서를 만든다 —
   js/mod-partcover.js 의 공통 신호 + 아래 마스크 transition-delay 가 순서를 만든다).

   ⚠ 위쪽 `html.is-mobile-static` 블록이 **연출을 꺼 두고 최종 상태로 고정**해 놨다
     (`.partcover__mask > span { transform: none; transition: none }`,
      `.partcover__figure { clip-path: inset(0 0 0 0) }`). 여기서 그걸 되살린다 —
     그래서 이 블록이 **그보다 뒤에** 있어야 한다.
   ⚠ 사진은 지면마다 요소가 다르다: 파트 I·III 는 `.partcover__bg`(커튼형), 파트 II 는
     `.partcover__figure`. 둘 다 적는다.
   ⚠ `clip-path` 는 GSAP 이 데스크톱에서 인라인으로 쓰지만 모바일에서는 그 모듈이 안 돈다
     (js/mod-partcover.js 의 is-mobile-static 가드) — 그래서 !important 가 필요 없다. */
@media (max-width: 767px) {
  /* ① 겉층은 흐려지지 않는다 — 연출은 안쪽 마스크·클립이 맡는다 */
  html.is-mobile-static #part-1 .partcover__title,
  html.is-mobile-static #part-1 .partcover__lead,
  html.is-mobile-static #part-2 .partcover__title,
  html.is-mobile-static #part-2 .partcover__lead,
  html.is-mobile-static #part-3 .partcover__title,
  html.is-mobile-static #part-3 .partcover__lead {
    opacity: 1;
    transform: none;
  }

  /* ② 글 — 마스크 안에서 밀려 올라온다 (데스크톱과 같은 값: 130% · 0.62s) */
  html.is-mobile-static #part-1 .partcover__mask > span,
  html.is-mobile-static #part-2 .partcover__mask > span,
  html.is-mobile-static #part-3 .partcover__mask > span {
    transform: translateY(130%);
    transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.is-mobile-static #part-1 .is-shown .partcover__mask > span,
  html.is-mobile-static #part-2 .is-shown .partcover__mask > span,
  html.is-mobile-static #part-3 .is-shown .partcover__mask > span {
    transform: none;
  }
  /* ★ 나오는 순서 — **제목(PART I.) → 사진 → 문구** ★ (2026-09-01 채린 "파트1 > 사진 > 타이틀")
     셋이 **같은 신호**로 한꺼번에 켜지고(js/mod-partcover.js), 순서는 여기 delay 가 만든다.
     ⚠ 겉층(.partcover__title/.lead)에 delay 를 주면 안 먹는다 — 위 ① 블록이 그 층의
       opacity/transform 을 이미 꺼 놨다(연출은 안쪽 마스크가 한다). 그래서 **여기**에 준다.
     ★ 조절하는 곳 ★ 제목 0s · 사진 0.26s(아래 ③) · 문구 0.5~0.68s.
     ⚠ 내력: 처음엔 **사진 0s · 제목 0.26s** 였다. 뜻은 '사진 먼저'였는데 화면에서는 반대로 보였다 —
       사진이 lazy 라 늦게 도착해 꼴찌로 떴기 때문이다(js/mod-partcover.js 의 미리 받기 주석).
       그걸 고치고 나서 **제목이 먼저**가 채린이 말한 순서다. */
  /* 문구는 줄마다 시차 — 사진이 다 열린 뒤에 이어진다(사진 0.26 + 0.24) */
  html.is-mobile-static .partcover__lead.is-shown .partcover__mask:nth-child(1) > span { transition-delay: 0.50s; }
  html.is-mobile-static .partcover__lead.is-shown .partcover__mask:nth-child(2) > span { transition-delay: 0.56s; }
  html.is-mobile-static .partcover__lead.is-shown .partcover__mask:nth-child(3) > span { transition-delay: 0.62s; }
  html.is-mobile-static .partcover__lead.is-shown .partcover__mask:nth-child(4) > span { transition-delay: 0.68s; }

  /* ③ 사진 — **오른쪽 끝에서 왼쪽으로 열린다** (데스크톱과 같은 방향·곡선)
     제목이 다 오른 뒤 열리도록 0.26s 늦춘다. */
  /* ⚠⚠ **파트 I 은 이 목록에 넣지 않는다** ⚠⚠ (2026-09-02 채린 "하늘색 > 사진 구간이 겹친다")
     파트 I 은 09-02 부터 **커튼형**이다 — 하늘색 면(.partcover__curtain)이 스크롤 진행도를 따라
     오른쪽부터 걷히면서 그 밑의 사진이 드러난다. 그런데 여기서 사진에도 똑같은 방향으로
     열리는 clip-path 를 주고 있었다 — **한쪽은 스크롤, 한쪽은 시계(0.72s + 0.26s 지연)** 기반이라
     둘이 서로 앞서거니 하며 그 사이에 빈 띠가 생겼다.
     실측(390×844): 진행도 0.20 에서 커튼은 `inset(0 16.62% 0 0)` 인데 사진은 `inset(0 0 0 3.5%)`.
     커튼이 다 걷히는 데 필요한 스크롤은 389px — 그걸 1초 안에 넘기면(손가락으로 훅 넘기면 늘 그렇다) 어긋난다.
     → 사진은 가만히 깔려 두고 **커튼만 걷는다**(데스크톱과 같은 구조).
     ⚠⚠ **파트 III 도 2026-09-02 부터 이 목록에서 빠졌다** — 같은 날 커튼형이 됐다
       (채린 "간지 3 효과를 간지 1이랑 동일하게"). 이제 남은 건 **파트 II 하나뿐**이다.
       거긴 커튼이 없어서 사진 자신이 유일한 연출이다. */
  html.is-mobile-static #part-2 .partcover__figure {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.26s;
  }
  html.is-mobile-static #part-2 .partcover__figure.is-shown {
    clip-path: inset(0 0 0 0);
  }

  /* 파트 I·III 사진은 처음부터 제자리에 그대로 있다 — 위의 커튼이 그걸 드러낸다.
     (상위 블록들이 남길 수 있는 값을 확실히 지운다.) */
  html.is-mobile-static #part-1 .partcover__bg,
  html.is-mobile-static #part-1 .partcover__bg.is-shown,
  html.is-mobile-static #part-3 .partcover__bg,
  html.is-mobile-static #part-3 .partcover__bg.is-shown {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}