@charset "utf-8";

/*
 * File    : sub-heart-risk.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * GLOBAL
 * VISUAL
 * PATTERN
 * HEAD
 * TEXT
 * THREAT
 * QUOTE
 * ISSUE
 * CONTROL
 * CTA
 * REFERENCES
 * HOVER
 */



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

/* isolation 필수. 없으면 패턴의 음수 z-index 가 조상까지 새어나간다 */
.heart-risk__container { display: grid; grid-template-columns: 1440rem; justify-content: center; justify-items: start; padding-bottom: 200rem; position: relative; isolation: isolate; overflow-x: clip; }
/* 1440 트랙 중앙 정렬: 블록이 행으로 쌓여 다국어 카피가 길어져도 겹치지 않는다. 좌우 위치는 트랙 기준 순수 margin-left, 장식 패턴만 absolute */



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

.heart-risk__visual-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.heart-risk__visual-bg:after { content: ''; position: absolute; inset: 0; background: var(--color-overlay-hero); pointer-events: none; } /* 히어로 딤드 30%: 포토/비디오 히어로 3페이지 공통 */
.heart-risk__visual-bg img { width: 100%; height: 100%; object-fit: cover; }

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

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

.heart-risk__visual-content { display: flex; flex-direction: column; gap: 24rem; width: 652rem; color: var(--color-white); }



/* **************************************** *
 * PATTERN
 * **************************************** */
/* z-index: -1 필수. 없으면 장식 패턴이 H2·본문 위를 덮는다 */
.heart-risk__pattern { display: block; position: absolute; z-index: -1; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
.heart-risk__pattern--01 { width: 1463rem; height: 1453rem; top: 1702rem; left: 50%; margin-left: -193rem; background-image: url(../images/sub/common/pattern-01.svg); transform: scaleX(-1); }
.heart-risk__pattern--02 { width: 1686rem; height: 1507rem; top: -152rem; left: 50%; margin-left: -1647rem; background-image: url(../images/sub/common/pattern-02.svg); transform: rotate(180deg); }



/* **************************************** *
 * HEAD
 * **************************************** */
.heart-risk__head { display: flex; flex-direction: column; align-items: start; gap: 24rem; }
.heart-risk__head-title { color: var(--color-primary); text-transform: uppercase; }
.heart-risk__head-sub em { font-style: italic; }



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



/* **************************************** *
 * THREAT
 * **************************************** */
.heart-risk__threat { display: grid; justify-items: start; grid-template-columns: 455rem 576rem; grid-template-areas: 'head image' 'text text'; width: 1031rem; margin: 73rem 0 0 366rem; } /* 본문은 타이틀 아래 전폭 행에서 좌측선을 맞춘다. */

.heart-risk__threat .heart-risk__head { grid-area: head; margin-top: 275rem; }

.heart-risk__threat-image { grid-area: image; width: 576rem; align-self: start; }
.heart-risk__threat-image svg { display: block; width: 100%; height: auto; overflow: visible; }

.heart-risk__threat-text { grid-area: text; width: 708rem; margin: 57rem 0 0 0; } /* 행 하단 = 아이스버그(480): 본문은 이미지 하단 + 57 */



/* **************************************** *
 * QUOTE
 * **************************************** */
.heart-risk__quote { width: 844rem; margin: 328rem 0 0 298rem; } /* 간격은 330 에서 threat 초과분을 뺀 값. 폭 844: 824 면 셋째 줄이 넘쳐 3줄이 깨진다 */
.heart-risk__quote-text { color: var(--color-gray-300); }



/* **************************************** *
 * ISSUE
 * **************************************** */
.heart-risk__issue { display: grid; justify-items: start; grid-template-columns: 673rem 830rem; grid-template-areas: 'image head' 'image text' 'image check'; width: 1503rem; margin: 329rem 0 0 -63rem; } /* 본문 708 이 타이틀 좌측선(이미지 673 + 122)에서 랩 우측변(1440)까지 */

.heart-risk__issue .heart-risk__head { grid-area: head; margin-left: 122rem; }

.heart-risk__issue-image { grid-area: image; width: 649rem; margin-top: 93rem; align-self: start; }
.heart-risk__issue-image svg { display: block; width: 100%; height: auto; overflow: visible; }

.heart-risk__issue-text { grid-area: text; width: 708rem; margin: 96rem 0 0 122rem; }

/* CHECK */
.heart-risk__check { grid-area: check; display: flex; flex-direction: column; gap: 24rem; width: 526rem; margin: 91rem 0 0 122rem; }

.heart-risk__check-list { display: flex; flex-direction: column; gap: 10rem; }

/* 체크박스는 첫 줄 기준 정렬: center 면 두 줄짜리 항목에서 박스가 줄 사이에 뜬다 (박스 22 중앙 ≈ 첫 줄 라인박스 22.4 중앙) */
.heart-risk__check-item { display: flex; align-items: flex-start; gap: 16rem; position: relative; cursor: pointer; }
.heart-risk__check-item input { position: absolute; width: 1rem; height: 1rem; opacity: 0; }
.heart-risk__check-item span { color: var(--color-gray-700); transition: color .3s; }
.heart-risk__check-item input:checked ~ span { color: var(--color-black); }

.heart-risk__check-box { flex-shrink: 0; display: block; width: 22rem; height: 22rem; position: relative; border: 1px solid var(--color-gray-400); transition: background-color .3s, border-color .3s; }
.heart-risk__check-box:after { content: ''; width: 10rem; height: 6rem; margin: -6rem 0 0 -6rem; position: absolute; top: 50%; left: 50%; border-left: 2rem solid var(--color-white); border-bottom: 2rem solid var(--color-white); transform: rotate(-45deg); opacity: 0; transition: opacity .3s; }
.heart-risk__check-item input:checked ~ .heart-risk__check-box { background: var(--color-black); border-color: var(--color-black); }
.heart-risk__check-item input:checked ~ .heart-risk__check-box:after { opacity: 1; }
.heart-risk__check-item input:focus-visible ~ .heart-risk__check-box { outline: 2px solid var(--color-primary); outline-offset: 2px; }



/* **************************************** *
 * CONTROL
 * **************************************** */
.heart-risk__control { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; width: 768rem; margin: 323rem 0 0 306rem; } /* 간격은 330 에서 issue 초과분을 뺀 값. 폭 = 타이틀 오프셋 60 + 본문 708 */

.heart-risk__control .heart-risk__head { margin-left: 60rem; }

.heart-risk__control-text { width: 708rem; margin: 97rem 0 0 60rem; }

.heart-risk__control-image { width: 576rem; margin-top: 7rem; }
.heart-risk__control-image svg { display: block; width: 100%; height: auto; overflow: visible; }



/* **************************************** *
 * CTA
 * **************************************** */
.heart-risk__actions { margin-top: 100rem; justify-self: center; }



/* **************************************** *
 * REFERENCES
 * **************************************** */
/* 폭을 직접 잡지 않고 트랙을 채운다. 컨테이너가 justify-items: start 라 stretch 를 명시해야 한다.
   폭을 박으면 밴드마다 트랙과 어긋나 메인의 레퍼런스와 그리드가 달라진다 */
.heart-risk__references { justify-self: stretch; margin: 176rem 0 0 0; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* CHECK */
    .heart-risk__check-item:hover .heart-risk__check-box { border-color: var(--color-gray-600); }
    .heart-risk__check-item:hover input:checked ~ .heart-risk__check-box { border-color: var(--color-black); }

}