/* =============================================================================
SWM — Identity scroll interaction / 필수 CSS
Page settings ▸ Custom code ▸ Inside tag 에 로 넣고,
바로 아래에 도 같이.
(JS 보다 먼저 실행돼야 우측 카드가 잠깐 보였다 사라지는 깜빡임이 없음)
========================================================================== */
/* ---------------------------------------------------------------------------
1. 폭 무관 — Designer 마크업 보정
--------------------------------------------------------------------------- */
/* .identity_info_content 안 카드 컬럼에 columns-grid-custom 배리언트가 붙어 있어서
aspect-ratio:16/9 + overflow:clip 이 걸린다. 그대로 두면 카드가 사진 높이에서
잘려 헤딩 / 본문 / Read More 가 통째로 사라진다.
(근본 수정은 Designer 에서 해당 배리언트를 빼는 것) */
html.id-js .identity_info_content .u-layout-column-2 {
aspect-ratio: auto;
overflow: visible;
}
/* 확대된 차량 박스가 우측 카드 위를 덮어 버튼 클릭을 먹는 것 방지 */
html.id-js .indentity_image_wrapper {
pointer-events: none;
}
/* ---------------------------------------------------------------------------
2. 인터랙션 ON — 데스크탑 + 모션 허용
--------------------------------------------------------------------------- */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
/* 섹션 자체를 스테이지로 고정.
원본은 position:relative + top:-4.6vh 로 히어로를 덮는데, sticky 가 되면 top 이
"고정 오프셋" 의미로 바뀌어 라운드 상단이 화면 위로 잘린다. 그래서 겹침은
margin-top 으로 옮기고 top 은 0 으로 둔다.
sticky 엘리먼트 "자신"의 overflow 는 sticky 를 깨지 않는다.
⚠ 조상인 .section_sticky_wrap 에는 절대 overflow 를 주지 말 것.
⚠ 선택자에 .u-section.light 를 붙인 건 취향이 아니라 필수 —
원본 규칙이 `.u-section.light.identity_wrap`(우선순위 0,3,0) 이라
`html.id-js .identity_wrap`(0,2,1) 로는 top:-4.6vh 를 못 이긴다. */
html.id-js .u-section.light.identity_wrap {
position: sticky;
top: 0;
margin-top: -4.6vh;
overflow: hidden; /* overflow:clip 미지원 브라우저용 폴백 */
overflow: clip;
}
/* margin-top 으로 흐름이 당겨져 wrap 바닥에 더 이상 빈 틈이 없다 */
html.id-js .sticky_bottom_white_spacer {
display: none;
}
/* 카드는 JS 가 등장시킬 때까지 숨김 + 확대된 차량 위로 */
html.id-js .identity_info_content {
opacity: 0;
z-index: 2;
}
html.id-js .indentity_image_wrapper,
html.id-js .u-background-slot.is-identity {
will-change: transform;
}
/* JS 가 런타임에 주입하는 스크롤 런웨이 = 고정 유지 구간의 길이 */
html.id-js .identity_scroll_runway {
height: var(--id-runway, 100vh);
pointer-events: none;
}
}
/* ---------------------------------------------------------------------------
3. 인터랙션 OFF — 모바일 / 모션 최소화
카드를 절대배치에서 빼내 정상 흐름으로 되돌린다. 원본 그대로 두면 카드가
섹션 아래로 흘러나가고, 12칸 그리드가 유지돼 폭 3/12 로 찌그러진다.
--------------------------------------------------------------------------- */
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
html.id-js .identity_info_content {
position: relative;
inset: auto;
}
html.id-js .identity_info_content .u-layout {
grid-template-columns: 1fr;
}
html.id-js .identity_info_content .u-layout-column-1 { /* 빈 스페이서 */
display: none;
}
/* ⚠ span 클래스(.u-column-span-N)로 잡지 말 것. Designer 에서 칸 수를 바꾸면
(span-3 → span-4 처럼) 규칙이 조용히 죽어서 카드가 다시 찌그러진다.
컬럼 위치로 잡으면 칸 수가 바뀌어도 살아남는다. */
html.id-js .identity_info_content .u-layout-column-2 {
grid-column: 1 / -1;
}
}
/* 차량 이미지 박스(58vw 정사각)가 40vw 짜리 행을 넘쳐 헤딩 / 카드와 겹치는 것 완화 */
@media (max-width: 991px) {
html.id-js .indentity_content {
height: 58vw;
}
}