/* ==========================================================================
   Process — 모바일 레이아웃 교정  (v4)

   Webflow 생성 CSS는 재발행 시 덮어써지므로(CLAUDE.md §6.1) 원본을 고치지 않고
   이 파일을 뒤에 로드해 덮어씁니다.

   실측 근거 (Chrome 390x844 / 900x844 / 1440x900, 라이브 페이지)
   ┌────────────┬──────────┬──────────┬──────────────────────────────────┐
   │            │ 1440     │ 900      │ 390                              │
   │ sticky top │ 0px      │ 42px     │ 473px                            │
   │ overflow   │ clip     │ clip     │ clip + .section-gap = hidden     │
   │ 고정 동작  │ ✓        │ ✓        │ ✗ (3891px 흘러감)                │
   └────────────┴──────────┴──────────┴──────────────────────────────────┘

   ── 교정 1. 텍스트 패널의 min-width 미해제 ────────────────────────────────
   원본: BASE min-width:34rem / max-width:34rem,  ≤767 max:28rem,  ≤479 max:21rem
   max-width 는 세 번 재정의되는데 min-width 는 한 번뿐이라 어디서도 안 풀립니다.
   CSS 에서 min-width 가 max-width 를 이기므로 479 구간에서도 폭이 544px 입니다.
   → min-width 를 풀고, max-width 를 뷰포트 기준으로 다시 잠급니다.

   ── 교정 2. 제목 마퀴의 가로 넘침 ─────────────────────────────────────────
   .process-heading-text-inner 는 flex:none, 내부에 DIUMCORPORATION 4개 + 별 3개.
   → sticky 의 "자식"인 .process-heading-text-block 에서 자릅니다.

   ── 교정 3. 모바일에서 sticky 가 죽는 문제 (핵심) ─────────────────────────
   @media (max-width:479px) { .section-gap { overflow: hidden } }
   이 규칙이 .process-content-sticky-block 의 조상에 스크롤 컨테이너를 만들어
   sticky 를 그 안에 가둡니다. 479 이하에만 있는 규칙이라 모바일에서만 깨졌습니다.

   ※ 같은 조상의 .section_process 는 BASE 에서 overflow:clip 인데 데스크톱
     sticky 가 정상 동작합니다. clip 은 스크롤 컨테이너를 만들지 않기 때문입니다.
     sticky 를 죽이는 것은 hidden 이고 clip 이 아닙니다.
     (v2 에서 .process-content-block-v1 에 clip 을 걸었던 것을 원인으로 지목했으나
      오진이었습니다. 그 clip 은 불필요해 제거했고, 진짜 원인은 이 규칙입니다.)

   ── 교정 4. sticky 가 붙을 자리가 없는 문제 ───────────────────────────────
   @media (max-width:479px) { .process-content-sticky-block { top: 10% } }
   10% 는 부모(.process-content-block-v1) 높이 기준이라 4735px × 10% = 473px 입니다.
   여기에 요소 높이 760px 을 더하면 1233px 로 뷰포트 844px 을 넘어, 교정 3 을
   해결해도 붙을 자리가 없습니다. 데스크톱과 동일하게 0 으로 되돌립니다.
   ========================================================================== */

@media screen and (max-width: 991px) {

  /* 교정 1 — min-width 해제 + 뷰포트 기준 재잠금 */
  .process-single-item-content-block {
    min-width: 0;
    max-width: min(28rem, calc(100vw - 2rem));
    margin-left: auto;
    margin-right: auto;
  }

  /* 교정 2 — 제목 마퀴 클리핑.
     sticky 의 자식이므로 hidden 을 걸어도 sticky 에 영향이 없습니다. */
  .process-heading-text-block {
    max-width: 100%;
    overflow: hidden;
  }
}

@media screen and (max-width: 479px) {

  .process-single-item-content-block {
    max-width: min(21rem, calc(100vw - 2rem));
  }

  /* 교정 3 — sticky 를 가두는 조상의 overflow 해제.
     .section-gap 은 사이트 전역 유틸리티이므로 process 섹션 안쪽으로만
     범위를 좁혀 다른 섹션에 영향이 가지 않게 합니다. */
  .section_process .section-gap {
    overflow: visible;
  }

  /* 교정 4 — sticky 오프셋을 데스크톱과 동일하게 0 으로 */
  .process-content-sticky-block {
    top: 0;
  }
}