/* ── 밑그림 모션 데모 레이어 (추가 전용 — 기존 style.css 미수정) ──
   컨셉: "밑그림이 그려지는 과정" — 펜이 그리는 행위가 모션 언어.
   기존 아트디렉션(다크+빨강·Zodiak·Pretendard) 유지. 금지 요소 미사용. */

/* 관통 펜 선 — 문서 좌표에 절대 배치, 콘텐츠 위 / 네비 아래 */
.mg-thread{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:45}
.mg-thread svg{display:block;overflow:visible}
.mg-thread path{fill:none;stroke:#FF4D33;stroke-linecap:round;stroke-linejoin:round}
.mg-thread .mg-ink{stroke-width:2.3;opacity:.92}
.mg-thread .mg-ghost{stroke-width:1.5;opacity:.3;transform:translate(1.4px,1.6px)}
.mg-thread .mg-nib{fill:#FF4D33;stroke:none;opacity:0}

/* 히어로 헤드라인 — 스탬프 진입 전 은닉 (JS 실패 시 3초 페일세이프로 해제) */
html.mg-h1 .hero-intro h1 .big{opacity:0}
.mg-char{display:inline-block;will-change:transform,opacity,filter}
.mg-word{white-space:nowrap}

/* 포폴 썸네일 — 밑그림(스케치) 레이어 위로 실물이 채워짐 */
.pf .shotwrap{position:relative;display:block}
.pf:nth-of-type(odd) .shotwrap{transform:rotate(-1.1deg)}
.pf:nth-of-type(even) .shotwrap{transform:rotate(.9deg)}
.pf:nth-of-type(even) .shotwrap{order:2}
.pf .shotwrap .shot{transform:none}
/* 스케치 복제본도 .shot을 달고 있으므로 :not()으로 갈라야 한다 —
   안 그러면 더 구체적인 이 규칙이 position:absolute를 덮어써서
   두 장이 나란히 흐름에 쌓인다(6차 실측). */
.pf .shotwrap>.shot:not(.mg-sketch){position:relative;z-index:1}
.pf .shotwrap>.mg-sketch{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;filter:url(#mg-pencil)}
.pf .mg-wipe{position:absolute;top:-2%;left:0;width:2px;height:104%;z-index:2;background:#FF4D33;
  opacity:0;pointer-events:none;box-shadow:0 0 10px rgba(255,77,51,.5)}
#mg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* 6단계 제도(製圖) — 핀 + 스크럽 */
.steps{position:relative}
.mg-draft{position:absolute;left:0;top:0;pointer-events:none;z-index:2;overflow:visible}
.mg-draft path,.mg-draft line{fill:none;stroke:#FF4D33;stroke-linecap:round}
.mg-draft .rail{stroke-width:1.6;opacity:.75}
.mg-draft .tick{stroke-width:1.3;opacity:.55;stroke-dasharray:4 4}
.mg-draft .stampbox{stroke-width:1.8;opacity:0}
.mg-draft .dot{fill:#FF4D33;stroke:none;opacity:.8}
.step .n{display:inline-block;transform-origin:left center}
@media(min-width:821px){
  /* 핀 시 한 화면에 들어오도록 여백만 압축 (카피·구조 불변) */
  #process{padding:9vh 0 8vh}
  #process .shead{margin-bottom:4.5vh}
  #process .step{padding:2.3vh 0}
}

/* 클릭 잉크 점 */
.mg-blot{position:fixed;z-index:69;pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;
  background:#FF4D33;border-radius:56% 44% 49% 51%/47% 53% 46% 54%;opacity:.85;will-change:transform,opacity}

/* 모바일 — 경량 모션 생존 (핀 없음, 선 얇게) */
@media(max-width:820px){
  .mg-thread .mg-ink{stroke-width:1.8}
  .mg-thread .mg-ghost{display:none}
  .pf:nth-of-type(even) .shotwrap{order:0}
}

/* 정적 폴백 */
html.noanim .mg-thread .mg-nib,
html.noanim .pf .mg-wipe{display:none}
@media(prefers-reduced-motion:reduce){
  .mg-thread .mg-nib,.pf .mg-wipe{display:none}
  html.mg-h1 .hero-intro h1 .big{opacity:1}
  .mg-draft .stampbox{opacity:1}
}