@charset "utf-8";

/*
 * File    : sub-about-exam.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * GLOBAL
 * VISUAL
 * PHOTO
 * PATTERN
 * HEAD
 * TEXT
 * RETINA
 * HEART
 * RESULT
 * REFERENCES
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
body.page-template-about-exam .main-container,
body.page-template-about-exam-us .main-container { padding-top: 0; padding-bottom: 0; }

/* isolation 필수. 없으면 패턴의 음수 z-index 가 조상까지 새어나간다 */
.about-exam__container { display: grid; grid-template-columns: 801rem 639rem; justify-content: center; justify-items: start; align-items: start; padding-bottom: 97rem; position: relative; isolation: isolate; overflow-x: clip; }
/* 블록은 DOM 순서로 한 행씩(1/-1 전폭): 컨테이너는 히어로~성능 섹션까지, 결과 카드 섹션은 홈 공용 블록이 뒤따른다 */



/* **************************************** *
 * VISUAL
 * **************************************** */
.about-exam__visual { min-height: 760rem; position: relative; }

.about-exam__visual-content { display: flex; flex-direction: column; align-items: center; gap: 60rem; width: 952rem; padding-top: 290rem; margin-left: auto; margin-right: auto; text-align: center; }
.about-exam__visual-content--wide { width: 1002rem; } /* 미국판: 제목 2줄 폭 */
.about-exam__visual-desc { color: var(--color-gray-700); }
.about-exam__visual-desc .jt-fill__line { --jt-fill-color: var(--color-gray-700); }



/* **************************************** *
 * PHOTO
 * **************************************** */
.about-exam__photo { height: 960rem; position: relative; overflow: hidden; } /* jt-background-video 가 절대 채움 */



/* **************************************** *
 * PATTERN
 * **************************************** */
/* z-index: -1 필수. 없으면 장식 패턴이 본문 위를 덮는다 */
.about-exam__pattern { display: block; position: absolute; z-index: -1; background-repeat: no-repeat; pointer-events: none; }
.about-exam__pattern--01 { width: 1271rem; height: 914rem; top: 2rem; left: 50%; margin-left: -311rem; background-image: url(../images/sub/common/pattern-01.svg); background-size: 1463rem 1453rem; background-position: 68rem -115rem; }
.about-exam__pattern--02 { width: 1686rem; height: 1507rem; top: 704rem; left: 50%; margin-left: -1895rem; background-image: url(../images/sub/common/pattern-02.svg); background-size: 100% 100%; }



/* **************************************** *
 * HEAD
 * **************************************** */
.about-exam__head { display: flex; flex-direction: column; align-items: start; gap: 24rem; }
.about-exam__head-title { color: var(--color-primary); text-transform: uppercase; }

.about-exam__head--works { grid-column: 1 / -1; margin: -163rem 0 0 366rem; }



/* **************************************** *
 * TEXT
 * **************************************** */
.about-exam__text { display: flex; flex-direction: column; gap: 30rem; }

.about-exam__text--works { grid-column: 1 / -1; width: 708rem; margin: 97rem 0 0 366rem; } /* 본문은 타이틀 좌측선에 정렬한다. */
.about-exam__text--works-us { margin-top: 37rem; } /* 미국판 타이틀은 1줄(104): 타이틀 행 트랙이 0 이라 망막 행 하단 기준으로 잡는다 */

/* 인용 밴드: 전 로케일, heart-risk 인용과 동일 패턴(스크롤 워드 필) */
.about-exam__quote { grid-column: 1 / -1; justify-self: center; width: 1080rem; margin-top: 325rem; } /* 3줄 자연 폭 1079: 좁으면 3줄이 5줄로 랩핑된다 */
.about-exam__quote-text { color: var(--color-gray-300); }
/* 국문 인용문은 넓은 중앙 정렬 폭을 사용한다. */
html[lang="ko-KR"] .about-exam__quote { width: 1184rem; }

/* 트러스트: 하트(좌) + 제목·본문(우, 시작선 610) 2컬럼 그리드 한 행.
   제목·본문은 trust-content 한 래퍼의 flex gap 96: 행 바깥 사정(인용 유무 등)이 안 간격을 못 건드린다 */
.about-exam__trust { grid-column: 1 / -1; justify-self: stretch; display: grid; grid-template-columns: 610rem 1fr; align-items: start; margin-top: 286rem; }
.about-exam__trust-content { display: flex; flex-direction: column; gap: 96rem; width: 708rem; margin-top: 47rem; } /* 하트 상단 대비 +47: 국문도 같은 좌표 */
.about-exam__text--trust { width: 708rem; }

/* 성능(심장 CT) 섹션: 영문·글로벌 전용. 타이틀이 흐름 기준, 일러스트는 타이틀 위로 겹쳐 우측 배치 */
.about-exam__head--perf { grid-column: 1 / -1; margin: 396rem 0 0 366rem; } /* 트러스트 행 하단 기준 */
.about-exam__vessel { grid-column: 1 / -1; width: 450rem; margin: -389rem 0 0 852rem; }
.about-exam__vessel svg { display: block; width: 100%; height: auto; }
.about-exam__text--perf { grid-column: 1 / -1; width: 708rem; margin: 85rem 0 0 366rem; } /* 행 하단 = 일러스트: 타이틀 하단 기준 96 */
/* 국문은 타이틀 없이 일러스트를 흐름 기준으로 사용한다. */
html[lang="ko-KR"] .about-exam__vessel { margin: 237rem 0 0 852rem; }
html[lang="ko-KR"] .about-exam__text--perf { margin: 125rem 0 0 366rem; }

/* 미국판(about-exam-us.php): 인용 밴드가 없고 3섹션이 망막·기술·소개로 이어진다. 좌표는 본문 행 하단 기준 */
.about-exam__container--us { padding-bottom: 130rem; } /* 본문 행 하단→카드 330 = 130 + 컴포넌트 상단 패딩 200 */
.about-exam__trust--us { margin-top: 195rem; }
.about-exam__trust-content--us { margin-top: 135rem; }
.about-exam__head--about { grid-column: 1 / -1; margin: 450rem 0 0 366rem; }
.about-exam__vessel--about { margin: -461rem 0 0 972rem; } /* 타이틀 행 하단 기준으로 타이틀 위로 끌어올린다 */
.about-exam__text--about { grid-column: 1 / -1; width: 708rem; margin: 96rem 0 0 366rem; } /* 일러스트 행 트랙은 음수 마진으로 0: 타이틀 하단 기준 96 */
.about-exam__note { color: var(--color-gray-700); } /* ASCVD 사건 정의 각주 */
.about-exam--us .main-result__data { padding-top: 0; } /* 우측 콘텐츠를 카드 상단선에서 시작한다: 아코디언(378)까지 더해도 카드 760 안에 든다 */



/* **************************************** *
 * RETINA
 * **************************************** */
.about-exam__retina { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; width: 400rem; height: 400rem; margin: 113rem 0 0 1008rem; }
.about-exam__retina svg { display: block; width: 360rem; height: auto; overflow: visible; }



/* **************************************** *
 * HEART
 * **************************************** */
.about-exam__heart { display: flex; align-items: center; justify-content: center; width: 400rem; height: 400rem; margin-left: -13rem; }
.about-exam__heart svg { display: block; width: 274rem; height: auto; overflow: visible; }

/* 트러스트 본문 각주(허가 표기) */
.about-exam__footnote { color: var(--color-gray-600); }



/* **************************************** *
 * RESULT: views/main-result-section.php (홈 공용)
 * **************************************** */
/* 섹션 자체는 홈 규칙(main.css .main-result) 그대로: 여기서는 앞뒤 페이지 여백만 잡는다.
   본문 행 하단→카드 297 = 컨테이너 97 + 컴포넌트 상단 패딩 200 */



/* **************************************** *
 * REFERENCES
 * **************************************** */
.about-exam__references { margin: 2rem 0 197rem; } /* 카드 박스 하단→타이틀 202 = 컴포넌트 하단 패딩 200 + 2 */