@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * LAYOUT
 * VISUAL
 * MATTERS
 * INSIGHT
 * RESULT
 * STORIES
 * REFERENCES
 * HOVER
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
body.home .main-container { padding-top: 0; padding-bottom: 0; }

/* GLOBAL */
.main-section { position: relative; }

.main-section__head { display: flex; flex-direction: column; align-items: center; gap: 24rem; text-align: center; }
.main-section__head.main-section__head--secondary { align-items: start; text-align: left; }
.main-section__title { color: var(--color-primary); text-transform: uppercase; }
.main-section__desc { color: var(--color-gray-700); }

.main-section__actions { display: flex; justify-content: center; gap: 16rem; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { display: flex; align-items: center; height: 100vh; position: relative; }
/* iOS 전용 보정: -webkit-fill-available 은 주소창이 접혀도 갱신되지 않아, 전역에 두면 하단에 빈 공간이 남는다 */
html.ios .main-visual { min-height: 100svh; max-height: -webkit-fill-available; }
/* Android 보정: 100vh 는 주소창 접힘 기준이라 노출 상태에선 가시 높이 초과. svh 는 정적 단위라 ScrollTrigger 재계산 없음 */
html.android .main-visual { height: auto; min-height: 100svh; }

.main-visual__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.main-visual__bg:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-overlay-hero); }

.main-visual__content { padding-top: 94rem; flex: 1; }
.main-visual__title { color: var(--color-white); }
.main-visual__desc { margin-top: 24rem; color: var(--color-text-on-dark-muted); } /* 히어로 리드 80%: 포토/비디오 히어로 공통 */
.main-visual__actions { display: flex; gap: 16rem; margin-top: 60rem; }



/* **************************************** *
 * MATTERS
 * **************************************** */
.main-matters { padding: 160rem 0 180rem; }

.main-matters__list { display: flex; gap: 120rem; margin-top: 120rem; margin-bottom: 140rem; }
.main-matters__list > li { flex: 1; }
.main-matters__list-image { width: 240rem; margin: 0 auto; }
.main-matters__list-image svg { display: block; width: 100%; height: auto; overflow: visible; }
.main-matters__list-txt { margin-top: 60rem; text-align: center; }
.main-matters__list-txt > p { margin-top: 24rem; color: var(--color-gray-600); }



/* **************************************** *
 * INSIGHT
 * **************************************** */
.main-insight { padding: 367rem 0 140rem; }
.main-insight__inner { max-width: 1272rem; margin: 0 auto; position: relative; }

.main-insight .main-section__head { max-width: 580rem; }
.main-insight .main-section__title { color: var(--color-brown-400); }
.main-insight .main-section__sub { color: var(--color-white); }
.main-insight .main-section__sub .jt-fill__line { background-image: linear-gradient(90deg, var(--color-white) 42%, var(--color-primary) 46%, var(--color-primary) 50%, var(--color-gray-600) 54%); } /* 다크 섹션 : 그라디언트 필 색감 반전(흰색 정착) */
.main-insight .main-section__desc { color: var(--color-text-on-dark-muted); } /* 리드 80%: 히어로 공통값 */

.main-insight__video { width: 100%; height: 67.74%; position: absolute; left: 0; top: 0; }
.main-insight__video:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 47.09%, #000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), var(--color-overlay-hero); } /* 그라디언트 + 평딤 30% (히어로 공통값) */

.main-insight__overlay { width: 100%; height: calc(32.26% + 2px); position: absolute; left: 0; bottom: 0; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%), #2d190c; } /* +2px = 비디오(67.74%)와의 경계 반올림 틈 차단: 양쪽 끝색이 #000이라 겹침은 안 보임 */

.main-insight__list { display: flex; gap: 24rem; margin-top: 140rem; margin-bottom: 80rem; }
.main-insight__list:focus-visible { outline: 2px solid var(--color-white); outline-offset: -2px; } /* 가로로 넘칠 때만 JS 가 초점을 준다. 어두운 배경이라 흰색, 화면 양끝에 닿는 목록이라 안쪽에 그린다 */
.main-insight__list > li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 24rem; padding: 30rem; background: rgba(231, 231, 215, 0.1); border-radius: 12rem; backdrop-filter: blur(50rem); }
.main-insight__list-name { text-align: center; color: var(--color-white); }
html[lang="ko-KR"] .main-insight__list-name { text-wrap: pretty; } /* 네 카드가 한 줄에 놓여 제목이 두 줄이 되는 폭(1024 등)에서 마지막 줄에 한 어절만 남지 않게 */
.main-insight__list-desc { text-align: center; color: rgba(255, 255, 255, 0.6); }
.main-insight__list-icon { width: 72rem; }
.main-insight__list-icon svg { display: block; width: 100%; height: auto; }



/* **************************************** *
 * RESULT
 * **************************************** */
.main-result { padding: 200rem 0; }

.main-result__inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24rem; } /* 12컬럼 절반씩(1440 기준 708+708): 우측 콘텐츠는 6컬럼 기준 중앙 */

/* GALLERY: 카드는 708×760 좌표계로 두고 --card-scale 로 갤러리 컬럼 실폭에 맞춘다 (1440 기준 1 = 708) */
.main-result__gallery { display: grid; }
.main-result__gallery--relocated { display: none; } /* 모바일에서 아이템이 아코디언으로 빠진 빈 컨테이너. :empty 는 텍스트 노드 탓에 안 걸려 JS 가 클래스로 표시 */
.main-result__gallery-item { --card-scale: 1; /* 카드 좌표계 = 컬럼 폭 708 그대로 */ grid-area: 1 / 1; height: calc(760rem * var(--card-scale)); position: relative; background: var(--color-brown-500); border: 1rem solid var(--color-brown-100); border-radius: 24rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; user-select: none; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; } /* 변수는 아이템 스코프: 모바일에서 아코디언 안으로 이동해도 유지. 테두리는 카드와 함께 줄어드는 1rem 이다(1px 로 두면 축소 구간의 Safari 레티나 화면에서 의도한 두께보다 굵어진다) */
.main-result__gallery-item--active { opacity: 1; visibility: visible; }
.main-result__gallery-item::-webkit-scrollbar { display: none; }
.main-result__gallery-item--grabbing { cursor: grabbing; }
.main-result__gallery-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* 가로로 넘칠 때만 JS 가 초점을 준다. 모바일은 아코디언(overflow: hidden) 안 풀폭이라 안쪽에 그린다 */
.main-result__peek-spacer { position: absolute; top: 0; height: 1rem; pointer-events: none; }

.main-result__card { width: 708rem; height: 760rem; position: absolute; top: 0; left: 0; transform: scale(calc(var(--card-scale) * 1.4)); transform-origin: 0 0; font-family: 'PlusJakartaSans', var(--font-primary); } /* ×1.4 = 목업 확대 배율: 내부 좌표는 원래 크기로 두고 스테이지에서 일괄 확대 */

/* 공용 : 툴팁 (검정 배지 + 아래 화살표) */
.main-result__tooltip { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 6rem 10rem; position: absolute; background: var(--color-black); border-radius: 3rem; color: var(--color-white); text-align: center; }
.main-result__tooltip:after { content: ''; position: absolute; bottom: -5rem; left: 50%; transform: translateX(-50%); border: 3rem solid transparent; border-top: 5rem solid var(--color-black); border-bottom: 0; }
.main-result__tooltip b { font-weight: 800; }
.main-result__tooltip span { font-weight: 600; }

/* 카드 1 : SCORE, 타일 2장 (스테이지 x174 y103, 360×409 ×2 gap 36) */
/* 스코어 카드의 확대 배율은 모든 지역판에서 동일하게 유지한다. */
.main-result__card--score { display: flex; gap: 27.69rem; padding: 87.69rem 0 0 92.31rem; transform: scale(calc(var(--card-scale) * 1.3)); }
.main-result__tile { flex-shrink: 0; width: 360rem; height: 409rem; position: relative; background: var(--color-white); border-radius: 10rem; }
.main-result--us .main-result__card--score { width: 544.62rem; } /* 미국판은 타일 1장: 스테이지 폭을 708/1.3 으로 줄여 가로 넘침을 없앤다(넘침이 없으면 우측 픽 패닝·드래그 스크롤이 발생하지 않는다). 92.31 + 360 + 92.31 = 타일 중앙 */
.main-result--us .main-result__gallery-item--01,
.main-result--us .main-result__gallery-item--02 { cursor: default; } /* 넘침 없는 카드: grab 커서 제거 */

.main-result__ring { width: 240rem; height: 240rem; position: absolute; top: calc(50% - 25.5rem); left: 50%; transform: translate(-50%, -50%); }
.main-result__ring-base { display: block; width: 100%; height: 100%; } /* height 명시: img height 속성(240px)이 rem 축소 밴드에서 남아 트랙이 타원이 된다 */
.main-result__ring-arc { width: 100%; height: 100%; position: absolute; inset: 0; transform: rotate(-90deg); } /* 12시 시작, 시계방향. 치수 명시: svg 속성(240px 고정)만으론 rem 축소 밴드에서 트랙과 어긋난다 */
.main-result__ring-progress { fill: none; stroke-dasharray: 717; stroke-dashoffset: 273; } /* 대시는 둘레(2π×114 = 716.28)보다 조금 길게 잡아 빈 링에서 끝점이 찍히지 않게 한다. 717 - 273 = 444 = 둘레의 62%(점수값). JS 타임라인이 두 값으로 드로잉하고 GSAP 은 px 을 정수로 반올림하므로 정수로 둔다 */
/* 아래 리포트 목업 타이포는 사이트 타입 스케일과 분리: 기준은 리포트 원본, jt-typo·타이포 토큰 쓰지 말 것 */
.main-result__ring-value { display: flex; flex-direction: column; gap: 6rem; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.main-result__ring-num { font-size: 90rem; line-height: 1; font-weight: 800; letter-spacing: -1.8rem; color: #d28f42; }
.main-result__ring-figure { display: flex; align-items: baseline; justify-content: center; } /* 미국판 8.9%: 숫자와 단위를 베이스라인으로 정렬 */
.main-result__ring-figure .main-result__ring-num { font-size: 69.23rem; letter-spacing: -6.92rem; } /* 확대(×1.3) 뒤 90 이 되도록 90/1.3. 위 90rem 규칙을 그대로 두면 117 로 커진다. "8." 자간 -9/1.3 */
.main-result__ring-unit { font-size: 46.15rem; line-height: 1; font-weight: 800; margin-left: 5.12rem; color: #d28f42; } /* 60/1.3. 숫자 끝 글자 뒤에도 자간(-6.92)이 붙어 +5.12 보정 → 9→% 간격 -1.8 */
.main-result__ring-label { font-size: 14rem; line-height: 1.1; font-weight: 600; color: var(--color-gray-600); }
.main-result__badge { display: block; padding: 6rem 24rem; position: absolute; bottom: 49rem; left: 50%; transform: translateX(-50%); background: #d29042; border-radius: 99rem; font-size: 18rem; line-height: 1.4; font-weight: 700; color: var(--color-white); white-space: nowrap; }

.main-result__tile-title { display: block; position: absolute; top: 24rem; left: 33rem; font-size: 21rem; line-height: 1.3; font-weight: 500; }
.main-result__tile-bars { display: block; width: 228rem; position: absolute; top: 86rem; left: 36rem; }
.main-result__tile-bars svg { display: block; width: 100%; height: auto; }
.main-result__bar { transform-box: fill-box; transform-origin: center bottom; } /* 순차 드로잉 모션용 */
.main-result__tile-percent { display: block; position: absolute; top: 188rem; left: 33rem; font-size: 60rem; line-height: 1.2; font-weight: 700; letter-spacing: -.6rem; color: #dc9843; }
.main-result__tile-caption { display: block; position: absolute; top: 308rem; left: 33rem; font-size: 21rem; line-height: 1.3; font-weight: 500; color: var(--color-gray-600); }

/* 카드 2 (미국) : 위험군 표, 화이트 패널 600×496 @ (54,132), 표 500×400 중앙. 좌표가 스테이지 기준이라 확대 배율 없음 */
.main-result__card--table { display: flex; align-items: center; justify-content: center; width: 600rem; height: 496rem; transform: scale(var(--card-scale)) translate(54rem, 132rem); background: var(--color-white); border-radius: 14rem; }
.main-result__risk-table { width: 502.8rem; border-collapse: separate; border-spacing: 1.4rem; table-layout: fixed; border-radius: 14rem; overflow: hidden; font-weight: 700; } /* 셀 영역 500×400 + 바깥 spacing 1.4. 높이는 tr 고정: 표 높이로 주면 남는 높이가 tbody 에만 분배돼 헤더 행이 낮아진다 */
.main-result__risk-table tr { height: 98.95rem; }
.main-result__risk-table th,
.main-result__risk-table td { padding: 8.4rem 0; font-weight: 700; text-align: center; vertical-align: middle; } /* text-align 은 셀에 직접: reset 의 th/td start 정렬이 표 상속을 끊는다 */
.main-result__risk-table thead th { width: 200rem; background: var(--color-brown-500); font-size: 15rem; line-height: normal; color: var(--color-black); }
.main-result__risk-table thead th + th { width: auto; }
.main-result__risk-table tbody th { font-size: 18rem; line-height: normal; color: var(--color-white); }
.main-result__risk-table tbody td { background: var(--color-gray-100); font-size: 18rem; line-height: normal; color: var(--color-black); }
.main-result__risk-row--low th { background: var(--color-graph-low); }
.main-result__risk-row--moderate th { background: var(--color-graph-moderate); }
.main-result__risk-row--high th { background: var(--color-graph-high); }

/* 카드 2 : GRAPH (스테이지 x98 y143, 756×349 화이트 패널, 내부는 패널 좌표) */
.main-result__card--graph { width: 756rem; height: 349rem; padding: 0; position: absolute; transform: scale(calc(var(--card-scale) * 1.4)) translate(57.14rem, 97.14rem); background: var(--color-white); border-radius: 10rem; } /* ×1.4 후 = 1058.4×488.6 @ (80,136). 오프셋은 translate: margin은 레이아웃 값이라 scale을 안 탄다 */
.main-result__graph-title { position: absolute; top: 15rem; left: 18rem; font-size: 9rem; font-weight: 700; }
.main-result__graph-legend { display: flex; gap: 10rem; position: absolute; top: 16rem; right: 15rem; }
.main-result__graph-legend span { display: flex; align-items: center; gap: 4rem; font-size: 6rem; font-weight: 600; color: var(--color-gray-600); }
.main-result__graph-legend img { display: block; width: 15rem; height: auto; }

.main-result__graph-gradbar { position: absolute; top: 42rem; bottom: 23rem; left: 37rem; width: 14rem; background: linear-gradient(180deg, #c94d47 -18%, #dab656 53%, #6aae8a 76%); border-radius: 99rem 99rem 0 0; transform-origin: 50% 100%; }
/* text-orientation: 기본값 mixed 는 한글을 세워둬 rotate(180deg) 에서 거꾸로 나온다. sideways 로 라틴과 동일하게 눕힌다 */
.main-result__graph-side { position: absolute; left: 14rem; font-size: 8rem; font-weight: 600; color: rgba(0, 0, 0, .5); writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); }
.main-result__graph-side--high { top: 42rem; }
.main-result__graph-side--level { top: 50%; transform: rotate(180deg) translateY(50%); color: var(--color-black); }
.main-result__graph-side--low { bottom: 23rem; }

.main-result__graph-bands { position: absolute; top: 51rem; left: 81rem; width: 636rem; }
.main-result__graph-bands i { display: block; height: 45rem; margin-bottom: 1rem; opacity: .4; transform-origin: 0 50%; }

.main-result__graph-ylabels { position: absolute; top: 45rem; left: 61rem; display: flex; flex-direction: column; gap: 34rem; font-size: 8rem; font-weight: 600; color: var(--color-gray-600); }
.main-result__graph-baseline { position: absolute; left: 37rem; right: 15rem; bottom: 23rem; height: 1rem; background: var(--color-gray-400); }
.main-result__graph-xlabels { position: absolute; top: 331rem; left: 100rem; right: 51rem; display: flex; justify-content: space-between; font-size: 6rem; font-weight: 600; color: var(--color-gray-600); }
.main-result__graph-xlabels .is-current { color: #dc9843; font-weight: 700; }
.main-result__graph-age { position: absolute; top: 330rem; right: 15rem; font-size: 8rem; font-weight: 600; color: var(--color-black); }

.main-result__graph-line { position: absolute; left: 103rem; }
.main-result__graph-line svg { display: block; width: 592rem; height: auto; overflow: visible; } /* 속성(592px) 고정 방지: rem 좌표계 정합 */
.main-result__line-dot { transform-box: fill-box; transform-origin: center; } /* 점 pop 모션용 */
.main-result__graph-line--01 { top: 148rem; }
.main-result__graph-line--02 { top: 114rem; }
.main-result__graph-line--03 { top: 91rem; }
.main-result__graph-line--04 { top: 74rem; }

.main-result__tooltip--graph { top: 100rem; left: 390rem; }
/* 국문 툴팁(29점·하위 16%)은 값에 맞춰 50-54 구간 25% 곡선 아래를 가리킨다: 영문(39점·87%)은 최상단 곡선 위치 유지 */
html[lang="ko-KR"] .main-result__tooltip--graph { top: 172rem; left: 411.5rem; translate: -50% 0; } /* 박스는 정지 화면(스테이지 x<448) 안에: 화살표만 도트(431.5) 쪽으로 오프셋 */
html[lang="ko-KR"] .main-result__tooltip--graph:after { left: calc(50% + 20rem); }
.main-result__graph-mydot { position: absolute; top: 210rem; left: 427rem; width: 9rem; height: 9rem; background: var(--color-black); border-radius: 50%; }
.main-result__tooltip--graph b { font-size: 8rem; }
.main-result__tooltip--graph span { font-size: 5rem; }

/* 국문 심혈관 위험도 추이 카드는 그래프 카드와 동일 축척을 사용한다. */
.main-result__card--traject { width: 756rem; height: 349rem; padding: 0; position: absolute; transform: scale(calc(var(--card-scale) * 1.4)) translate(57.14rem, 97.14rem); background: var(--color-white); border-radius: 10rem; }
.main-result__traject-title { position: absolute; top: 15rem; left: 18rem; font-size: 9rem; font-weight: 700; font-family: var(--font-primary); letter-spacing: -.09rem; }
.main-result__card--traject .main-result__graph-legend { top: 16rem; right: 15rem; } /* 레전드는 그래프 카드 공용 */

.main-result__traject-side { position: absolute; top: 50%; left: 16rem; transform: rotate(180deg) translateY(50%); font-size: 8rem; font-weight: 600; font-family: var(--font-primary); color: var(--color-black); writing-mode: vertical-rl; text-orientation: sideways; }

.main-result__traject-grid { position: absolute; top: 54rem; left: 57rem; right: 15rem; display: flex; flex-direction: column; gap: 33rem; }
.main-result__traject-grid i { display: block; height: 1rem; background: #efefef; }
.main-result__traject-ylabels { position: absolute; top: 48rem; left: 40rem; display: flex; flex-direction: column; gap: 22rem; font-size: 8rem; font-weight: 600; color: var(--color-gray-600); text-align: right; width: 12rem; }
.main-result__traject-axis { position: absolute; top: 43rem; left: 57rem; width: 1rem; height: 283rem; background: #e5e1da; }
.main-result__traject-baseline { position: absolute; top: 326rem; left: 57rem; right: 15rem; height: 1rem; background: #e5e1da; }

.main-result__traject-line { position: absolute; left: 57rem; right: 15rem; height: 0; border-top: 2rem dashed; }
.main-result__traject-line--high { top: 150rem; border-color: #c94e47; }
.main-result__traject-line--moderate { top: 217rem; border-color: #43a3dc; }
.main-result__traject-band { position: absolute; right: 15rem; font-size: 8rem; font-weight: 600; font-family: var(--font-primary); }
.main-result__traject-band--high { top: 135rem; color: #c94e47; }
.main-result__traject-band--moderate { top: 202rem; color: #43a3dc; }
.main-result__traject-expect { position: absolute; top: 124rem; right: 96rem; font-size: 8rem; font-weight: 600; font-family: var(--font-primary); color: #dc9843; }

.main-result__traject-curve { position: absolute; top: 138rem; left: 307rem; width: 317rem; height: 78rem; }
.main-result__traject-curve svg { display: block; width: 100%; height: 100%; }

.main-result__traject-today { position: absolute; top: 181rem; left: 307rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.main-result__traject-today .main-result__tooltip { position: static; font-size: 8rem; white-space: nowrap; font-family: var(--font-primary); }
.main-result__traject-dot { display: block; width: 9rem; height: 9rem; background: var(--color-black); border-radius: 50%; }

.main-result__traject-next { position: absolute; top: 218rem; left: 354rem; width: 99rem; display: flex; flex-direction: column; align-items: center; gap: 4rem; }
.main-result__traject-nextdot { display: block; width: 5rem; height: 5rem; background: #dc9843; border-radius: 50%; }
.main-result__traject-nextbox { position: relative; padding: 6rem 10rem; background: #dc9843; border-radius: 3rem; font-size: 8rem; line-height: 1.4; font-weight: 800; font-family: var(--font-primary); color: var(--color-white); text-align: center; white-space: nowrap; }
.main-result__traject-nextbox:before { content: ''; position: absolute; top: -5rem; left: 50%; transform: translateX(-50%); border: 3rem solid transparent; border-bottom: 5rem solid #dc9843; border-top: 0; }

.main-result__traject-xlabels { position: absolute; top: 331rem; left: 0; right: 0; font-size: 6rem; font-weight: 600; color: var(--color-gray-600); }
.main-result__traject-xlabels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* 카드 3 : PEER (스테이지 x98 y143, 756×354 화이트 패널) */
.main-result__card--peer { width: 756rem; height: 354rem; position: absolute; transform: scale(calc(var(--card-scale) * 1.4)) translate(57.14rem, 94.43rem); background: var(--color-white); border-radius: 10rem; }
.main-result__peer-range { position: absolute; top: 20rem; left: 16rem; right: 16rem; padding: 20rem 10rem; background: #f5ede0; border-radius: 10rem; }
.main-result__peer-bar { height: 24rem; position: relative; background: linear-gradient(90deg, #6aae8a 0%, #dab656 47%, #c94d47 118%); border-radius: 99rem; transform-origin: 0 50%; }
.main-result__peer-bar b { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 14rem; font-weight: 700; color: var(--color-white); }
.main-result__peer-dot { position: absolute; top: 50%; left: 200rem; width: 5rem; height: 5rem; transform: translateY(-50%); background: var(--color-white); border-radius: 50%; }
.main-result__peer-scale { display: flex; justify-content: space-between; margin-top: 4rem; padding: 0 7rem; font-size: 8rem; font-weight: 600; color: var(--color-gray-600); }

.main-result__tooltip--peer { top: 5rem; left: 226rem; transform: translate(-50%, -100%); }
.main-result__tooltip--peer b { font-size: 12rem; font-weight: 700; }

.main-result__peer-table { width: 724rem; position: absolute; left: 16rem; bottom: 21rem; border-collapse: separate; border-spacing: 1rem; border-radius: 10rem; overflow: hidden; }
.main-result__peer-table th,
.main-result__peer-table td { padding: 5rem 2rem; background: var(--color-gray-100); font-size: 8rem; font-weight: 600; text-align: center; }
.main-result__peer-table thead th { background: #f5ede0; font-size: 8rem; }
.main-result__peer-table thead tr:first-child th { font-size: 9rem; font-weight: 700; }
.main-result__peer-table tbody th { width: 100rem; font-size: 9rem; font-weight: 700; color: var(--color-white); }

/* 카드 4 : CHECKLIST (스테이지 x90 y124, 528×393 화이트 패널) */
.main-result__card--checklist { display: flex; gap: 20rem; width: 528rem; height: max-content; position: absolute; top: 50%; transform: scale(calc(var(--card-scale) * 1.4)) translate(57.14rem, -50%); padding: 24rem; box-sizing: border-box; background: var(--color-white); border-radius: 10rem; } /* 수직은 자동 중앙: 로케일별 콘텐츠 높이(EN 546.8/KR 506.6)가 달라 고정 y 로는 한쪽이 틀어진다. 높이는 max-content(스테이지 760 상속 차단), 가로는 x90(90+528+90=708 대칭): translate라 스케일 좌표계에서 정확 */
.main-result__checklist-column { flex: 1; display: flex; flex-direction: column; gap: 20rem; min-width: 0; }
.main-result__checklist-item { display: flex; flex-direction: column; gap: 8rem; }
.main-result__checklist-title { display: flex; align-items: center; gap: 6rem; font-size: 12rem; line-height: 1.5; font-weight: 600; }
.main-result__checklist-title img { display: block; width: 15rem; height: auto; }
.main-result__checklist-list { display: flex; flex-direction: column; gap: 3rem; }
.main-result__checklist-list li { margin-left: 15rem; font-size: 10rem; line-height: 1.3; font-weight: 400; color: var(--color-gray-700); list-style: disc; }

/* DATA */
.main-result__data { display: flex; flex-direction: column; gap: 48rem; width: 586rem; max-width: 100%; margin: 0 auto; padding-top: 56rem; }

.main-result__data .jt-accordion { min-height: 294rem; align-content: flex-start; } /* 1개 열림 높이로 고정. 없으면 전환 중 총높이가 출렁여 아래 CTA 가 딸각거린다. align-content 필수. flex-wrap 컨테이너는 min-height 의 남는 높이를 각 줄(항목)에 나눠 늘려 제목이 행 가운데에서 벗어난다 */
.main-result--us .main-result__data .jt-accordion { min-height: 378rem; } /* 미국판 2번 설명(문단 + 불릿 3) 열림 높이 */
.main-result__data .jt-accordion__content-inner p { color: var(--color-gray-600); }
.main-result__list { display: flex; flex-direction: column; gap: 4rem; margin-top: 12rem; padding-left: 18rem; list-style: disc; color: var(--color-gray-600); } /* 미국판 위험군 컷포인트 목록 */

/* 안내사항: 국문 about-exam 전용 보조 고지 (views/main-result-section.php 의 notice 인자) */
.main-result__notice { display: flex; flex-direction: column; gap: 8rem; }
.main-result__notice p { color: var(--color-gray-600); }

.main-result__data .jt-btn__box,
.main-result__data .jt-btn__gradient { align-self: start; }



/* **************************************** *
 * STORIES
 * **************************************** */
.main-stories { padding: 160rem 0 196rem; background: var(--color-brown-500); }
/* 스토리를 숨기면 참고문헌에 페이지 배경색을 적용한다. */
.main-stories--refs-only { padding: 16rem 0 244rem; background: none; }

/* SLIDER */
.main-stories__slider { margin-top: 100rem; margin-bottom: 80rem; position: relative; }
/* 트랙·카드에 will-change/translateZ/backface 금지: 상시 합성 레이어가 되면 rem 소수 좌표에서
   카드 하단 1px 보더가 사라진다(뷰포트 폭에 따라 전멸). 전환 중 승격은 브라우저가 알아서 한다 */
.main-stories__slider .swiper { overflow: hidden; }

/* ITEM */
.main-stories__item { display: flex; flex-direction: column; height: auto; background: var(--color-white); border: 1px solid var(--color-brown-100); border-radius: 24rem; overflow: hidden; isolation: isolate; }
.main-stories__item-link { display: flex; flex-direction: column; flex: 1; gap: 36rem; color: inherit; }
.main-stories__item-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -6px; border-radius: 24rem; } /* 카드 overflow:hidden 안쪽에 그려야 잘리지 않음 */

.main-stories__item-image { height: 300rem; overflow: hidden; }
.main-stories__item-image .jt-lazyload { width: 100%; height: 100%; }
.main-stories__item-image .jt-lazyload img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(0.23, 1, 0.32, 1); }

.main-stories__item-content { display: flex; flex-direction: column; flex: 1; gap: 24rem; padding: 0 30rem 30rem; }

.main-stories__item-info { display: flex; flex-direction: column; gap: 6rem; }
.main-stories__item-meta { color: var(--color-gray-600); }

/* NEXT */
.main-stories__prev.swiper-button-lock,
.main-stories__prev.swiper-button-disabled,
.main-stories__next.swiper-button-lock,
.main-stories__next.swiper-button-disabled { display: none; } /* 시작=prev 숨김(한 번 넘기면 등장), 끝=next 숨김: 순환 없음 */
.main-stories__prev { display: flex; align-items: center; justify-content: center; width: 56rem; height: 56rem; margin: 0; padding: 0; position: absolute; top: 234rem; right: calc(100% + 36rem); background: transparent; border: 2rem solid var(--color-primary); border-radius: 20rem; cursor: pointer; transition: background-color .3s; z-index: 2; }
.main-stories__prev .jt-icon { display: block; width: 20rem; height: 20rem; transform: rotate(180deg); }
.main-stories__prev .jt-icon svg { display: block; width: 100%; height: 100%; }
.main-stories__next { display: flex; align-items: center; justify-content: center; width: 56rem; height: 56rem; margin: 0; padding: 0; position: absolute; top: 234rem; left: calc(100% + 36rem); background: transparent; border: 2rem solid var(--color-primary); border-radius: 20rem; cursor: pointer; transition: background-color .3s; z-index: 2; }
.main-stories__next .jt-icon { display: block; width: 20rem; height: 20rem; }
.main-stories__next .jt-icon svg { display: block; width: 100%; height: 100%; }
.main-stories__prev .jt-icon svg path,
.main-stories__next .jt-icon svg path { fill: var(--color-primary); transition: fill .3s; }

/* 스와이프 도트: 모바일 전용. PC 는 next 화살표가 내비게이션 */
.main-stories__dots { display: none; justify-content: center; gap: 8rem; margin-top: 32rem; }
.main-stories__dots .swiper-pagination-bullet { width: 8rem; height: 8rem; margin: 0; background: var(--color-gray-400); border-radius: 50%; opacity: 1; transition: background-color .3s; }
.main-stories__dots .swiper-pagination-bullet-active { background: var(--color-primary); }



/* 화살표는 wrap(1440) 밖 92rem 돌출(간격 36 + 폭 56): 여백이 92 미만이 되는 1624 아래를 1640 브레이크포인트가 커버해 안쪽으로 넣는다 (1641 이상은 여백 100 이상) */
@media (max-width: 1640px){
    .main-stories__prev { right: auto; left: 24rem; background: var(--color-bg-100); }
    .main-stories__next { left: auto; right: 24rem; background: var(--color-bg-100); }
}



/* **************************************** *
 * REFERENCES
 * **************************************** */
.main-stories .jt-references { margin-top: 180rem; }
/* 스토리 비노출 지역판: 섹션에 References 만 남는다. 슬라이더와의 단차(180)를 접는다. 3중 셀렉터 = 뒤에 로드되는 rwd 밴드값(110/80)보다 우선 */
.main-stories.main-stories--refs-only .jt-references { margin-top: 0; }



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

    /* STORIES */
    .main-stories__item-link:hover .main-stories__item-image img { transform: scale(1.04); }
    .main-stories__prev:hover,
    .main-stories__next:hover { background: var(--color-primary); }
    .main-stories__prev:hover .jt-icon svg path,
    .main-stories__next:hover .jt-icon svg path { fill: var(--color-white); }

}