/* contents03 — 섹션 자체를 sticky로 고정하고, shot 3장은 처음부터 100px씩 오프셋을 둬서
   겹쳐진 상태로 배치한다. 슬라이드 애니메이션이 아니라 처음부터 그 자리에 있는 것이라
   스크롤해도 "올라오는" 움직임 없이, 섹션이 화면에 붙잡혀 있는 동안 이미 쌓인 상태로 보인다 
.project_view_contents03{position:sticky;top:100px;overflow:visible;min-height:150vh;}
.project_view_contents03_inner{position:relative;margin:0 auto;}

.project_view_contents03_shot{position:absolute;left:0;width:100%;border-radius:2px;overflow:hidden;background:var(--color-bg);box-shadow:0 -20px 40px rgba(0,0,0,0.12);}
.project_view_contents03_shot_1{top:0;z-index:1;}
.project_view_contents03_shot_2{top:100px;z-index:2;}
.project_view_contents03_shot_3{top:200px;z-index:3;}


.project_view_contents03_caption{position:absolute;top:40px;right:40px;width:445px;padding:40px;background:var(--color-bg);}
.project_view_contents03_text{font-family:'Pretendard',sans-serif;font-weight:700;font-size:20px;line-height:1.6;letter-spacing:-0.04em;color:#222222;}

.project_view_contents03_shot.project_view_contents03_shot_3 { height: 1030px;}*/

/* project_view_contents03_inner — 섹션(min-height:1090px 고정)이 sticky 스크롤 여백용으로 항상 1090px를 차지하는 반면, inner는 clamp()로 화면 폭에 비례해 528~990px로 줄어든다. position:relative(상단 고정)로 두면 화면이 줄수록 아래쪽에 빈 여백만 늘어나 보이므로, absolute+top:50%+translateY(-50%)로 항상 섹션 안에서 세로 중앙에 오도록 고정한다.
   좌우는 project_view_contents02_inner가 1920px 이하 구간에서 쓰는 것과 동일한 gutter(7.8125vw, 1920 기준 150px)를 적용해 화면이 줄어도 좌우 여백이 사라지지 않게 한다.
   shot은 position:absolute;left:0;width:100%가 inner의 padding-box(=inner 자체 크기) 기준으로 채워지므로, inner에 padding을 줘도 shot에는 반영되지 않는다 — 대신 inner의 left/right 오프셋 자체를 그 gutter만큼 안쪽으로 당겨서(0 대신 clamp 값) shot이 그 안쪽 폭에 맞춰 자연히 줄어들게 한다 */
.project_view_contents03_inner{position:absolute;top:calc(50% - 100px);left:clamp(80px, 7.8125vw, 150px);right:clamp(80px, 7.8125vw, 150px);transform:translateY(-50%);}

/* project_view_contents03 / _text — 섹션 min-height가 화면 "너비" 기준 clamp라 화면 "높이"가 짧은 창에서는 inner가 잘려 보일 수 있었다. 대신 height:100vh로 섹션 자체를 뷰포트 높이와 정확히 같게 고정하면, GSAP pin 박스가 항상 실제 화면 높이만큼만 잡히고 inner(top:50%)는 그 안에서 화면 크기와 무관하게 항상 정중앙에 온다. 캡션 텍스트도 20px 고정이라 상대적으로 커 보였으므로 font-size도 같은 기준으로 clamp */
.project_view_contents03{height:100vh;}
.project_view_contents03_text{font-size:clamp(15px, calc(0.56vw + 9.29px), 20px);}
.project_view_contents03_shot{max-height:50vh;aspect-ratio:80/49}
.project_view_contents03_shot.project_view_contents03_shot_3{aspect-ratio:1200/1033;height:auto;max-height:none;}

/* footer_section — GSAP pin-spacer가 project_view_contents03의 top:100px를 spacer 자신에게도 position:relative;top:100px로 그대로 복제한다. top은 문서 흐름 공간에는 영향을 안 주는 값이라, spacer(및 그 안의 섹션)만 시각적으로 100px 더 아래로 밀려서 바로 뒤에 오는 푸터를 100px만큼 덮는 문제가 있었다. top:0으로 없애면 이 침범은 해결되지만 대신 핀 고정 시작 시 콘텐츠 상단이 고정 헤더(74px)에 가릴 수 있어서, top:100px는 그대로 두고 대신 반대편(푸터)을 그만큼 밀어 내려서 침범을 상쇄한다 */
.footer_section{margin-top:100px;}