@charset "utf-8";

/*
 * File    : sub-get-tested.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * GLOBAL
 * VISUAL
 * INTRO
 * LINE
 * STEP
 * CTA
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
body.page-template-get-tested .main-container { padding-top: 0; padding-bottom: 0; }

.get-tested__container { display: grid; grid-template-columns: 1440rem; justify-content: center; justify-items: start; padding-bottom: 200rem; position: relative; overflow-x: clip; }
/* 1440 트랙 중앙 정렬: 블록 좌우 위치는 트랙 기준 순수 margin-left, 스텝 간격은 앞 스텝 실제 하단 기준. 장식 라인만 absolute */



/* **************************************** *
 * VISUAL
 * **************************************** */
/* vh 고정: dvh 는 주소창 개폐로 값이 바뀌어 ScrollTrigger start/end 가 재계산되며 모션이 튄다. 보정은 html.ios 등으로 좁혀서 */
.get-tested__visual { min-height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: center; }
/* 모바일 보정: 100vh 는 주소창 접힘 기준이라 노출 상태에선 가시 높이 초과. svh 는 정적 단위라 ScrollTrigger 재계산 없음 */
html.android .get-tested__visual,
html.ios .get-tested__visual { min-height: 100svh; }

.get-tested__visual .wrap { width: 100%; } /* flex 교차축 auto 마진이 stretch 를 무효화: 1440 트랙 유지 */

.get-tested__visual-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.get-tested__visual-bg:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-overlay-hero); }
.get-tested__visual-bg img { width: 100%; height: 100%; object-fit: cover; }


.get-tested__visual-desc { color: var(--color-text-on-dark-muted); } /* 히어로 리드 80%: 포토/비디오 히어로 공통 */

.get-tested__visual-content { display: flex; flex-direction: column; gap: 24rem; width: 960rem; color: var(--color-white); }



/* **************************************** *
 * INTRO
 * **************************************** */
.get-tested__intro { display: flex; flex-direction: column; align-items: center; gap: 24rem; width: 952rem; margin-top: 156rem; justify-self: center; text-align: center; }
.get-tested__intro-title { color: var(--color-primary); text-transform: uppercase; }
.get-tested__intro-desc { color: var(--color-gray-700); }



/* **************************************** *
 * LINE
 * **************************************** */
.get-tested__pattern { display: none; } /* 모바일 전용: rwd 860 에서 배치 */

.get-tested__line { width: 491rem; position: absolute; top: 560rem; left: 50%; margin-left: -574rem; pointer-events: none; }
.get-tested__line svg { display: block; width: 100%; height: auto; overflow: visible; }

.get-tested__line-track { stroke: var(--color-gray-300); }
.get-tested__line-progress { stroke: var(--color-primary); stroke-width: 2; }



/* **************************************** *
 * STEP
 * **************************************** */
/* position: relative 필수. 없으면 여정 라인이 숫자 원 위로 올라온다. 라인에 음수 z-index 를 주는 대신 이쪽 (컨테이너가 스태킹 컨텍스트가 아니라 밴드마다 결과가 달라진다) */
.get-tested__step { display: flex; flex-direction: column; gap: 36rem; width: 800rem; position: relative; }
.get-tested__step--01 { margin: 154rem 0 0 122rem; }
.get-tested__step--02 { margin: 204rem 0 0 610rem; }
.get-tested__step--03 { margin: 180rem 0 0 409rem; }
.get-tested__step--04 { margin: 179rem 0 0 168rem; }
.get-tested__step--05 { margin: 180rem 0 0 531rem; }

.get-tested__step-image { height: 450rem; border: 1px solid var(--color-brown-100); border-radius: 24rem; background: var(--color-bg-200); overflow: hidden; }
.get-tested__step-image .jt-lazyload { width: 100%; height: 100%; }
.get-tested__step-image .jt-lazyload img { width: 100%; height: 100%; object-fit: cover; }

.get-tested__step-info { display: flex; flex-direction: column; gap: 14rem; width: 600rem; }

/* 숫자는 첫 줄 기준 정렬: center 면 두 줄 제목에서 원이 줄 사이에 뜬다. margin-top = (제목 줄높이 36 - 원 48)/2 */
.get-tested__step-head { display: flex; align-items: flex-start; gap: 28rem; }
.get-tested__step-num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48rem; height: 48rem; margin-top: -6rem; font-style: normal; color: var(--color-white); background: var(--color-primary); border-radius: 99rem; }
.get-tested__step-title { flex: 1; } /* 타이포는 마크업의 jt-typo--01 이 공급 */

.get-tested__step-desc { padding: 0 40rem 0 78rem; }



/* **************************************** *
 * CTA
 * **************************************** */
.get-tested__actions { margin-top: 179rem; justify-self: center; }