@charset "utf-8";
/*
* File : rwd-about-exam.css
* Author : STUDIO-JT
*
* SUMMARY :
* 1201~1480px
* 1480px
* 1200px
* 860px
* 540px
*/
/* **************************************** *
* 1201~1480px: 트랙 폭을 .wrap 에 맞춘다
* **************************************** */
/* .wrap 은 1480 부터 폭 제한을 풀고 거터 40 으로 가므로 801+639=1440rem 트랙도
컬럼 비율을 유지한 채 합계를 .wrap 콘텐츠 폭으로 줄인다.
1200 이하는 안쪽 블록이 1440 트랙 기준 좌표라 함께 바꾸면 밀려나므로 구간을 가둔다 */
@media (min-width: 1201px) and (max-width: 1480px){
/* 세로 여백 축소: 1481 위에서는 트랙이 가운데 놓여 좌우로 240 이 남지만,
이 구간은 트랙이 폭을 채워 거터가 40 뿐이라 같은 세로 값이 가로의 7 배로 보인다.
비어 있는 구간(본문→리포트, 리포트→References)만 줄인다: 하트·망막 일러스트가
차지하는 구간은 건드리면 겹친다 */
.about-exam__container { grid-template-columns: calc((100% - 80rem) * 801 / 1440) calc((100% - 80rem) * 639 / 1440); padding-bottom: 0; } /* 본문→카드 200 = 컴포넌트 상단 패딩 200 */
/* 트랙 시작점 기준 고정 좌표(margin-left)라 트랙이 줄면 우측 여백만 좁아진다: 트랙 끝 정렬로 */
.about-exam__retina { justify-self: end; margin-left: 0; }
.about-exam .main-result { padding-bottom: 140rem; }
.about-exam__references { margin: 0 0 140rem; }
}
/* **************************************** *
* 1480px
* **************************************** */
@media (max-width: 1480px){
/* HEART : 1440 그리드(±720rem) 밖 좌측 클램프 */
.about-exam__heart { margin-left: 30rem; }
}
/* **************************************** *
* 1200px
* **************************************** */
@media (max-width: 1200px){
/* GLOBAL : 1120rem 그리드 + 타이포 변수 보정 */
.about-exam {
--font-size-primary-03: 20rem;
--font-size-primary-04: 17rem;
--font-size-secondary-01: 56rem;
--font-size-secondary-02: 48rem;
--font-size-secondary-03: 44rem;
}
.about-exam__container { grid-template-columns: 620rem 500rem; padding-bottom: 112rem; } /* 본문→카드 312 = 112 + 컴포넌트 상단 패딩 200 */
/* PHOTO */
.about-exam__photo { height: 800rem; }
/* HEAD */
.about-exam__head--works { margin: -130rem 0 0 280rem; }
/* TEXT */
.about-exam__text--works { margin: 102rem 0 0 280rem; }
.about-exam__text--works-us { margin-top: 49rem; } /* 1줄 타이틀(48px) 만큼 당긴다 */
.about-exam__head--perf { margin-left: 280rem; }
.about-exam__vessel { margin-left: 650rem; }
.about-exam__text--perf { margin-left: 280rem; }
html[lang="ko-KR"] .about-exam__vessel { margin: 190rem 0 0 650rem; }
html[lang="ko-KR"] .about-exam__text--perf { margin: 100rem 0 0 280rem; }
/* QUOTE: 국문 1184 는 1120 트랙을 넘는다, 영문과 동일 폭으로 */
html[lang="ko-KR"] .about-exam__quote { width: 1080rem; }
/* TRUST: 콘텐츠 시작선 470, 하트 하단부와 나란히 */
.about-exam__trust { grid-template-columns: 470rem 1fr; margin-top: 38rem; }
.about-exam__trust-content { width: 650rem; gap: 114rem; margin-top: 256rem; }
.about-exam__text--trust { width: 650rem; }
/* 미국판: 인용 밴드가 없어 망막 본문 뒤 간격을 직접 잡고, 소개 섹션은 성능 섹션 좌표를 따른다 */
.about-exam__trust--us { margin-top: 150rem; }
.about-exam__trust-content--us { gap: 96rem; margin-top: 115rem; }
.about-exam__head--about { margin-left: 280rem; }
.about-exam__vessel--about { width: 380rem; margin: -520rem 0 0 740rem; } /* 3줄 타이틀(48px, 폭 ~440 → 우측 720)과 겹치지 않도록 우측 끝(1120) 정렬 + 타이틀 상단 위로: 650 좌표면 타이틀 첫 줄과 겹친다 */
.about-exam__text--about { width: 650rem; margin-left: 280rem; }
/* RETINA */
.about-exam__retina { width: 340rem; height: 340rem; margin: 140rem 0 0 780rem; }
.about-exam__retina svg { width: 300rem; }
/* HEART */
.about-exam__heart { width: 340rem; height: 340rem; margin: 0; }
.about-exam__heart svg { width: 240rem; }
/* REFERENCES */
.about-exam__references { width: 1120rem; margin: 67rem auto 152rem; } /* 카드 박스→타이틀 267 = 67 + 컴포넌트 하단 패딩 200 */
}
/* **************************************** *
* 860px
* **************************************** */
@media (max-width: 860px){
/* GLOBAL : 768 그리드 스택 전환 */
.about-exam {
--font-size-primary-03: 19rem;
--font-size-primary-05: 15rem;
--font-size-secondary-01: 48rem;
--font-size-secondary-02: 40rem;
--font-size-secondary-03: 36rem;
}
/* align-items·justify-content 재설정 필수: base 의 grid 정렬값이 flex 에도 그대로 먹어 자식이 stretch 대신 글자 폭이 된다 */
.about-exam__container { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; padding: 90rem 24rem 0; }
/* TRUST : 래퍼를 흘려보내 제목(4)→하트(5)→본문(6) 이 컨테이너 order 로 개별 스택되게 한다 */
.about-exam__trust,
.about-exam__trust-content { display: contents; }
/* VISUAL */
.about-exam__visual { min-height: 0; }
.about-exam__visual-content { gap: 36rem; width: auto; padding: 190rem 24rem 100rem; margin: 0; }
.about-exam__visual-title br,
.about-exam__visual-desc br { display: none; } /* 모바일: PC용
제거 → 자연 랩핑(고아텍스트 방지) */
.about-exam__visual-title .jt-reveal__mask { display: inline; }
.about-exam__visual-title .jt-reveal__mask::after { content: ' '; }
.about-exam__visual-title .jt-reveal__line { display: inline; }
.about-exam__visual-desc .jt-fill__line { display: inline; }
.about-exam__visual-desc .jt-fill__line:after { content: ' '; }
/* PHOTO */
.about-exam__photo { height: 520rem; }
/* PATTERN : 모바일 컨투어 2개, 상단-우측 / 중단-좌측.
변환 프레임의 meta 좌표는 대각 원점이라 heart-risk 구현값으로 디코딩(scaleX: left=x-w / rot180: +top=y-h) */
.about-exam__pattern--01 { width: 971rem; height: 1074rem; top: -178rem; left: 26rem; margin-left: 0; background-size: 100% 100%; background-position: 0 0; }
.about-exam__pattern--02 { width: 1116rem; height: 1415rem; top: 973rem; left: -744rem; margin-left: 0; }
/* HEAD */
.about-exam__head { gap: 16rem; }
.about-exam__head--works { order: 1; margin: 0; }
.about-exam__head--trust { order: 4; margin: 100rem 0 0; }
/* TEXT */
.about-exam__text { gap: 24rem; }
.about-exam__text--works { order: 3; width: auto; margin: 32rem 0 0; }
.about-exam__quote { order: 3; width: auto; margin: 100rem 0 0; }
html[lang="ko-KR"] .about-exam__quote { width: auto; } /* base 국문 고정 폭 해제: lang 특이도 카운터 */
.about-exam__text--trust { order: 6; width: auto; margin: 32rem 0 0; }
/* 성능 섹션: order 6 공유(트러스트 본문 뒤 DOM 순서), 헤드→일러스트→본문 스택 */
.about-exam__head--perf { order: 6; margin: 100rem 0 0; }
.about-exam__vessel { order: 6; width: 300rem; margin: 36rem auto 0; }
.about-exam__text--perf { order: 6; width: auto; margin: 32rem 0 0; }
/* base 의 국문 좌표(html[lang] 특이도)가 밴드 스택 마진을 눌러 국문 카운터를 함께 둔다 */
html[lang="ko-KR"] .about-exam__vessel { margin: 100rem auto 0; } /* 국문은 타이틀이 없어 일러스트가 블록 간 gap(100)을 맡는다 */
html[lang="ko-KR"] .about-exam__text--perf { margin: 32rem 0 0; }
/* 미국판 소개 섹션: 성능 섹션과 같은 스택 리듬 */
.about-exam__head--about { order: 6; margin: 100rem 0 0; }
.about-exam__vessel--about { order: 6; width: 300rem; margin: 36rem auto 0; }
.about-exam__text--about { order: 6; width: auto; margin: 32rem 0 0; }
/* RETINA */
.about-exam__retina { order: 2; width: 300rem; height: 300rem; margin: 36rem auto 0; }
.about-exam__retina svg { width: 260rem; }
/* HEART */
.about-exam__heart { order: 5; width: auto; height: auto; margin: 36rem auto 0; }
.about-exam__heart svg { width: 220rem; }
/* RESULT : 홈과 같은 블록. 카드 이동·스케일·캡션은 rwd-main.css 가 맡는다(홈·about-exam 에서 싣는다) */
/* REFERENCES */
.about-exam__references { width: auto; margin: 0 0 110rem; } /* 상단 여백은 컴포넌트 하단 패딩 120 */
}
/* **************************************** *
* 540px
* **************************************** */
@media (max-width: 540px){
/* GLOBAL : 390 그리드 */
.about-exam {
--font-size-primary-03: 19rem; /* T4: 본문 */
--font-size-primary-04: 17rem; /* T5/T6: 리드 */
--font-size-primary-05: 16rem; /* T7/T8 */
--font-size-primary-06: 14rem; /* T10/T11 */
--font-size-secondary-01: 35rem; /* T1 */
--font-size-secondary-02: 33rem; /* T2: 섹션 타이틀 */
--font-size-secondary-03: 26rem; /* T3 (PC 48 / 모바일 26) */
}
/* 거터 16, 본문 블록만 +14 로 여백 30 을 만든다: 아코디언·히어로는 16 */
.about-exam__container { padding: 70rem 16rem 0; }
.about-exam__head,
.about-exam__text { padding-left: 14rem; padding-right: 14rem; }
/* jt-references 는 거터 16 그대로: 번호(:before)·자체 gap 이 안쪽 들여쓰기를 만들므로 +14 를 겹치면 과폭 */
/* VISUAL : 거터 16 안쪽에 콘텐츠 패딩 20 (콘텐츠 폭 318 = 390-16*2-20*2).
래퍼가 하나뿐이라 16+20 을 합산해 px-36 으로 적용 */
.about-exam__visual-content { gap: 30rem; padding: 160rem 36rem 80rem; }
/* PHOTO */
.about-exam__photo { height: 320rem; }
/* HEAD */
.about-exam__head { gap: 30rem; }
.about-exam__head--trust { margin-top: var(--space-section-mobile); } /* 블록 간 gap */
/* TEXT */
.about-exam__text { gap: 30rem; }
.about-exam__text--works,
.about-exam__text--trust { margin-top: 40rem; } /* Row 내 간격 */
.about-exam__quote { margin-top: var(--space-section-mobile); padding: 0 20rem; }
.about-exam__quote-text br { display: none; }
/* 성능 섹션: 인접 섹션과 동일 리듬 */
.about-exam__head--perf { margin-top: var(--space-section-mobile); }
.about-exam__vessel { margin-top: 40rem; }
.about-exam__text--perf { margin-top: 40rem; }
html[lang="ko-KR"] .about-exam__vessel { margin-top: var(--space-section-mobile); }
html[lang="ko-KR"] .about-exam__text--perf { margin-top: 40rem; }
.about-exam__head--about { margin-top: var(--space-section-mobile); }
/* 소개 타이틀
분절 해제: textFillReveal 이 br 을 .jt-fill__line 블록으로 치환하는데, 이 밴드는 1rem 이 뷰포트/390 으로 비례 확대돼 'a broader view of your' 가 폭과 무관하게 항상 박스보다 길어 'your' 가 고아가 된다 → inline 전환으로 자연 랩핑(541 이상은 설계된 3줄이 그대로 들어감) */
.about-exam__head--about .about-exam__head-sub .jt-fill__line { display: inline; }
.about-exam__head--about .about-exam__head-sub .jt-fill__line:not(:last-child):after { content: ' '; }
.about-exam__vessel--about { margin-top: 40rem; }
.about-exam__text--about { margin-top: 40rem; }
/* RETINA */
.about-exam__retina { width: 220rem; height: 220rem; margin-top: 40rem; }
.about-exam__retina svg { width: 190rem; }
/* HEART */
.about-exam__heart { margin-top: 40rem; }
.about-exam__heart svg { width: 160rem; }
/* REFERENCES */
.about-exam__references { margin-bottom: 90rem; } /* 상단 여백은 컴포넌트 하단 패딩 100 */
}