@charset "utf-8";

/*
 * File    : rwd-heart-risk.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 1201~1480px
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1201~1480px: 트랙 폭을 .wrap 에 맞춘다
 * **************************************** */
/* .wrap 은 1480 부터 폭 제한을 풀고 거터 40 으로 가므로 1440rem 트랙도 같은 폭으로 줄인다.
   1200 이하는 안쪽 블록이 1440 트랙 기준 좌표라 함께 바꾸면 트랙 밖으로 밀려나므로 구간을 가둔다 */
@media (min-width: 1201px) and (max-width: 1480px){

    .heart-risk__container { grid-template-columns: calc(100% - 80rem); }

    /* ISSUE: 좌측 블리드(-63)는 두고 우측 끝을 트랙에 맞춘다. 고정 폭(1503·708)이면 본문이 뷰포트 끝까지 나가 스크롤바 폭만큼 잘린다 */
    .heart-risk__issue { width: calc(100% + 63rem); grid-template-columns: 673rem minmax(0, 1fr); }
    .heart-risk__issue-text { width: auto; max-width: 708rem; }

}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    /* ISSUE */
    .heart-risk__issue { margin-top: 330rem; }

    /* 흐름 배치라 블록 높이가 밴드별 줄바꿈에 따라 1~2rem 달라져 간격을 보정한다 */
    .heart-risk__control { margin-top: 321rem; }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    /* GLOBAL : 1120rem 그리드 + 타이포 변수 보정 */
    .heart-risk {
        --font-size-primary-03: 20rem;
        --font-size-primary-04: 17rem;

        --font-size-secondary-01: 56rem;
        --font-size-secondary-02: 48rem;
        --font-size-secondary-04: 38rem;
    }

    .heart-risk__container { padding-bottom: 160rem; }

    /* VISUAL */
    .heart-risk__visual-content { margin-left: 0; } /* 좌 40 = wrap 패딩 40 */

    /* THREAT */
    .heart-risk__threat { grid-template-columns: 660rem 460rem; width: 1120rem; margin-left: 160rem; }

    .heart-risk__threat .heart-risk__head { margin-top: 210rem; }

    .heart-risk__threat-image { width: 460rem; }

    .heart-risk__threat-text { width: 708rem; margin: 57rem 0 0 0; }

    /* QUOTE */
    .heart-risk__quote { margin-top: 311rem; }

    /* ISSUE */
    .heart-risk__issue { grid-template-columns: 594rem 526rem; width: 1120rem; margin: 305rem 0 0 160rem; }

    .heart-risk__issue .heart-risk__head { margin-left: 0; }

    .heart-risk__issue-image { width: 510rem; margin-top: 80rem; }

    .heart-risk__issue-text { width: 526rem; margin: 96rem 0 0 0; }

    .heart-risk__check { width: 480rem; margin: 56rem 0 0; }

    /* CONTROL */
    .heart-risk__control { width: 768rem; margin: 276rem 0 0 326rem; }

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

    .heart-risk__control-text { width: 708rem; margin: 97rem 0 0 40rem; } /* 타이틀(밴드 헤드 ml 40) 좌측선 정렬 */

    .heart-risk__control-image { width: 480rem; margin-top: -10rem; }

    /* CTA */
    .heart-risk__actions { margin-top: 110rem; }

    /* REFERENCES */
    .heart-risk__references { width: 1120rem; margin: 179rem 0 0 160rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* GLOBAL : 768 그리드 스택 전환 */
    .heart-risk {
        --font-size-primary-03: 19rem;
        --font-size-primary-05: 15rem;

        --font-size-secondary-01: 48rem;
        --font-size-secondary-02: 40rem;
        --font-size-secondary-04: 32rem;
    }

    /* 패턴이 본문 위로 겹치지 않게 base 의 isolation 을 그대로 두고, 상하 블리드도 잘라낸다 */
    .heart-risk__container { display: flex; flex-direction: column; min-height: 0; padding: 90rem 24rem 110rem; overflow: clip; }

    /* VISUAL */
    .heart-risk__visual-content { gap: 20rem; width: auto; } /* 좌우 24 = wrap 패딩 */
    .heart-risk__visual-title br { display: none; }
    .heart-risk__visual-title .jt-reveal__mask { display: inline; }
    .heart-risk__visual-title .jt-reveal__mask::after { content: ' '; }
    .heart-risk__visual-title .jt-reveal__line { display: inline; }

    /* PATTERN : 모바일 컨투어 2개, 상단-좌측 / 중단-우측.
       base 의 배경이미지·transform(scaleX(-1)/rotate180)은 그대로 두고 위치/크기만 교정 */
    .heart-risk__pattern--02 { width: 936rem; height: 1382rem; top: -171rem; left: -607rem; margin-left: 0; }
    .heart-risk__pattern--01 { width: 1011rem; height: 1453rem; top: 1682rem; left: 50rem; margin-left: 0; }

    /* HEAD */
    .heart-risk__head { gap: 16rem; }

    /* base/1200 밴드의 grid 배치용 margin 리셋: 여기선 세로 스택이라 전부 0 이어야 한다 */
    .heart-risk__threat .heart-risk__head,
    .heart-risk__issue .heart-risk__head,
    .heart-risk__control .heart-risk__head { margin: 0; }

    /* TEXT */
    .heart-risk__text { gap: 24rem; }

    /* THREAT */
    .heart-risk__threat { display: flex; flex-direction: column; gap: 28rem; width: auto; margin: 0; }

    .heart-risk__threat-image { width: 420rem; margin: 8rem auto 0; }

    .heart-risk__threat-text { width: auto; margin: 0; }

    /* QUOTE */
    .heart-risk__quote { width: auto; margin: 100rem 0 0; }

    /* ISSUE */
    .heart-risk__issue { display: flex; flex-direction: column; gap: 28rem; width: auto; margin: 110rem 0 0; }

    .heart-risk__issue-image { width: 460rem; margin: 8rem auto 0; }

    .heart-risk__issue-text { width: auto; margin: 0; }

    /* CHECK */
    .heart-risk__check { width: auto; margin: 8rem 0 0; }

    /* CONTROL */
    .heart-risk__control { display: flex; flex-direction: column; gap: 28rem; width: auto; margin: 110rem 0 0; }

    .heart-risk__control-text { width: auto; margin: 0; }

    .heart-risk__control-image { width: 440rem; margin: 8rem auto 0; }

    /* CTA */
    .heart-risk__actions { margin: 90rem 0 0; text-align: center; }

    /* REFERENCES */
    .heart-risk__references { width: auto; margin: 120rem 0 0; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* GLOBAL : 390 그리드 */
    .heart-risk {
        --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-04: 24rem;
    }

    /* 거터 16, 본문 블록만 +14 로 여백 30 을 만든다: List·CTA·히어로는 16 */
    .heart-risk__container { padding: 70rem 16rem 90rem; }
    .heart-risk__threat,
    .heart-risk__quote,
    .heart-risk__issue,
    .heart-risk__control { padding-left: 14rem; padding-right: 14rem; }
    /* jt-references 는 거터 16 그대로: 번호(:before)·자체 gap 이 안쪽 들여쓰기를 만들므로 +14 를 겹치면 과폭 */

    /* 컨테이너 좌우 패딩이 14 줄어 절대배치 패턴도 그만큼 밀린다: 원위치로 보정 */
    .heart-risk__pattern--01 { left: 64rem; }
    .heart-risk__pattern--02 { left: -593rem; }

    /* VISUAL */
    .heart-risk__visual-content { gap: 16rem; } /* 좌우 16 = wrap 패딩 */

    /* HEAD */
    .heart-risk__head { gap: 30rem; }

    /* TEXT */
    .heart-risk__text { gap: 30rem; }

    /* THREAT */
    .heart-risk__threat { gap: 40rem; }

    .heart-risk__threat-image { width: 300rem; }

    /* QUOTE : 좁은 인셋 칼럼 */
    .heart-risk__quote { margin-top: var(--space-section-mobile); padding: 0 20rem; }
    .heart-risk__quote-text br { display: none; }

    /* ISSUE */
    .heart-risk__issue { gap: 40rem; margin-top: var(--space-section-mobile); }

    .heart-risk__issue-image { width: 300rem; }

    /* CHECK */
    .heart-risk__check { gap: 24rem; margin-left: -14rem; margin-right: -14rem; } /* issue 의 +14 상쇄: 목록 거터는 16 */

    .heart-risk__check-item { gap: 16rem; }

    /* CONTROL */
    .heart-risk__control { gap: 40rem; margin-top: var(--space-section-mobile); }

    .heart-risk__control-image { width: 300rem; }

    /* CTA */
    .heart-risk__actions { margin-top: 80rem; }
    .heart-risk__actions .jt-btn__gradient { min-height: 60rem; }

    /* REFERENCES */
    .heart-risk__references { margin-top: 90rem; }

}