@charset "utf-8";

/*
 * File    : sub-result-sheet.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * GLOBAL
 * VISUAL
 * PATTERN
 * REPORT
 * TITLE
 * PAGING
 * GUIDE
 * CTA
 * HOVER
 */



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

.result-sheet__container { display: grid; grid-template-columns: 820rem 562rem; column-gap: 58rem; grid-template-areas: 'report aside'; justify-content: center; align-items: start; padding-bottom: 100rem; position: relative; overflow-x: clip; }
/* 어사이드는 row1 stretch = 스티키 트랙이 리포트 하단까지. 리포트의 transform: scale() 축소는 레이아웃 박스를 줄이지 않으므로 축소 밴드에서 margin-bottom 음수로 상쇄(rwd 참조) */



/* **************************************** *
 * VISUAL
 * **************************************** */
.result-sheet__visual { min-height: 760rem; position: relative; }

.result-sheet__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; }
.result-sheet__visual-desc { color: var(--color-gray-700); }
.result-sheet__visual-desc .jt-fill__line { --jt-fill-color: var(--color-gray-700); }



/* **************************************** *
 * PATTERN
 * **************************************** */
.result-sheet__pattern { display: block; width: 1686rem; height: 1507rem; position: absolute; top: -416rem; left: 50%; margin-left: -1504rem; background: url(../images/sub/common/pattern-02.svg) no-repeat; background-size: 100% 100%; pointer-events: none; }



/* **************************************** *
 * REPORT
 * **************************************** */
.result-sheet__report { grid-area: report; position: relative; width: 820rem; border-radius: 24rem; overflow: hidden; }
/* position: relative 필수. 하이라이트/딤/핫스팟이 이 박스를 기준으로 절대배치된다.
   grid 전환으로 static 이 되면 기준이 컨테이너로 튀어 오버레이가 화면 폭 전체로 퍼진다. */
.result-sheet__report .jt-lazyload { width: 100%; padding-top: 141.95%; }
.result-sheet__report img { border-radius: 24rem; }

.result-sheet__highlight { display: block; width: calc(100% - 30rem); position: absolute; top: 38.316%; left: 15rem; height: 22.423%; box-sizing: border-box; border: 2rem solid var(--color-primary); border-radius: 10rem; opacity: 0; pointer-events: none; box-shadow: 0 0 0 9999rem color-mix(in srgb, var(--color-white) 80%, transparent); transition: top .4s, height .4s, opacity .3s; } /* 그림자 = 활성 외 영역 딤: blur 0 spread 는 단색이라 밴딩 없음, 라운드를 그대로 따라간다(컨테이너 overflow hidden 이 클립). 기본 숨김, 선택 시 JS 가 opacity 1 */

.result-sheet__hotspot { display: block; width: calc(100% - 30rem); margin: 0; padding: 0; position: absolute; left: 15rem; box-sizing: border-box; background: transparent; border: 2rem solid transparent; border-radius: 10rem; cursor: pointer; transition: border-color .3s; }
.result-sheet__hotspot--active { cursor: default; }
.result-sheet__hotspot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }



/* **************************************** *
 * TITLE
 * **************************************** */
/* ASIDE: 타이틀·파트 탭·가이드 전체가 한 덩어리로 스티키 (트랙 = 리포트 하단 1164까지) */
.result-sheet__aside { grid-area: aside; align-self: stretch; width: 562rem; } /* 높이를 주지 않아야 row1(리포트 높이)에 맞춰 스티키 트랙이 정해진다 */
.result-sheet__aside-sticky { display: flex; flex-direction: column; align-items: start; position: sticky; top: 100rem; z-index: 10; } /* sticky 는 자체 스태킹 컨텍스트라 안쪽 .result-sheet__guide 의 z-index 는 이 안에서만 통한다. 여기에 z 를 주지 않으면 열린 메뉴가 문서상 뒤에 오는 푸터의 위치 지정 요소(구독 폼·하단 링크·국가 선택) 아래에 깔린다 */

.result-sheet__title { display: flex; flex-direction: column; align-items: start; gap: 24rem; }
.result-sheet__title-eyebrow { color: var(--color-primary); text-transform: uppercase; }



/* **************************************** *
 * PAGING
 * **************************************** */
.result-sheet__paging { display: flex; gap: 16rem; margin-top: 42rem; }

/* 텍스트 탭: 액티브 = 블랙 + 언더라인 */
.result-sheet__paging-btn { display: block; margin: 0; padding: 0; color: var(--color-gray-500); background: transparent; border: none; cursor: pointer; transition: color .3s; }  /* 타이포는 마크업의 jt-typo 클래스가 공급 */
.result-sheet__paging-btn--active { color: var(--color-black); text-decoration: underline; text-underline-offset: 5rem; cursor: default; }



/* **************************************** *
 * GUIDE
 * **************************************** */
.result-sheet__guide { display: flex; flex-direction: column; gap: 20rem; align-self: stretch; margin-top: 58rem; position: relative; z-index: 10; } /* 등장 모션 transform 이 스태킹 컨텍스트를 만들어 z 지정이 없으면 열린 메뉴가 푸터 구독 바 아래에 깔린다(860px 이하는 스티키가 풀려 이 값이 페이지 기준으로 통한다) */

/* SELECT */
.result-sheet__select { display: flex; align-items: center; gap: 24rem; padding: 20rem; background: var(--color-primary); border-radius: 10rem; cursor: pointer; } /* 박스 전체 클릭으로 메뉴 열기 */
.result-sheet__select-label { flex: 1; color: var(--color-white); }

.result-sheet__select-toggle { flex-shrink: 0; display: block; width: 24rem; height: 24rem; margin: 0; padding: 11rem 3rem; position: relative; background: transparent; border: none; cursor: pointer; }
.result-sheet__select-toggle:before,
.result-sheet__select-toggle:after { content: ''; display: block; width: 18rem; height: 2rem; position: absolute; left: 3rem; background: var(--color-white); transition: transform .3s; }
.result-sheet__select-toggle:before { top: 6rem; }
.result-sheet__select-toggle:after { bottom: 6rem; }
.result-sheet__select-toggle i { display: block; width: 18rem; height: 2rem; background: var(--color-white); }

/* DESC */
.result-sheet__desc { padding: 20rem; background: var(--color-white); border: 1px solid var(--color-primary); border-radius: 10rem; }
.result-sheet__desc-item { display: none; flex-direction: column; gap: 16rem; }
.result-sheet__desc-item--active { display: flex; }

/* MENU */
.result-sheet__menu { display: flex; flex-direction: column; gap: 24rem; width: 100%; padding: 20rem; position: absolute; top: 0; left: 0; background: var(--color-primary); border-radius: 10rem; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 2; }
.result-sheet__menu--open { opacity: 1; visibility: visible; }

/* 헤더 전체 클릭으로 메뉴 닫기: 패널 패딩까지 헤더가 먹어야 닫힘 바(전체 클릭)와 누를 수 있는 영역이 같아진다.
   패딩이 패널에만 있으면 헤더 위아래 20rem 이 클릭 대상에서 빠져 "열었을 때만 X 아이콘을 눌러야" 하는 상태가 된다 */
.result-sheet__menu-head { display: flex; align-items: center; gap: 36rem; margin: -20rem -20rem 0; padding: 20rem; cursor: pointer; }
.result-sheet__menu-label { flex: 1; color: var(--color-white); }

.result-sheet__menu-close { flex-shrink: 0; display: block; width: 24rem; height: 24rem; margin: 0; padding: 0; position: relative; background: transparent; border: none; cursor: pointer; }
.result-sheet__menu-close:before,
.result-sheet__menu-close:after { content: ''; display: block; width: 20rem; height: 2rem; position: absolute; top: 11rem; left: 2rem; background: var(--color-white); transition: transform .3s; }
.result-sheet__menu-close:before { transform: rotate(45deg); }
.result-sheet__menu-close:after { transform: rotate(-45deg); }

.result-sheet__menu-list { display: flex; flex-direction: column; gap: 16rem; }
.result-sheet__menu-list button { display: block; width: 100%; margin: 0; padding: 0; text-align: left; font: inherit; color: var(--color-white); background: transparent; border: none; cursor: pointer; opacity: .5; transition: opacity .3s; }
.result-sheet__menu-list button.result-sheet__menu-btn--active { opacity: 1; }

/* 다중 파트 지역판의 페이지 헤딩은 하단 밑줄로 현재 파트를 강조한다. */
.result-sheet__menu-part { margin-top: 16rem; padding-bottom: 8rem; border-bottom: 1px solid rgba(255, 255, 255, .3); color: var(--color-white); opacity: .5; transition: opacity .3s, border-color .3s; }
.result-sheet__menu-part--active { opacity: 1; border-bottom-color: var(--color-white); }
.result-sheet__menu-list .result-sheet__menu-part:first-child { margin-top: 0; }



/* **************************************** *
 * CTA
 * **************************************** */
/* 페이지 하단 환자 사례 CTA */
.result-sheet__actions { display: flex; justify-content: center; padding-bottom: 247rem; }

/* 스토리 비노출 지역판: CTA 블록이 담당하던 페이지 하단 여백을 컨테이너가 이어받는다 */
.result-sheet--no-stories .result-sheet__container { padding-bottom: 247rem; }



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

    /* PAGING */
    .result-sheet__paging-btn:not(.result-sheet__paging-btn--active):hover { color: var(--color-black); }

    /* MENU */
    .result-sheet__menu-list button:hover { opacity: 1; text-decoration: underline; }

    /* REPORT HOTSPOT: 프라이머리 30% 투명 하이라이트. 활성 섹션엔 미표시(액티브 스포트라이트와 겹침 방지) */
    .result-sheet__hotspot:not(.result-sheet__hotspot--active):hover { background: color-mix(in srgb, var(--color-primary) 30%, transparent); }

}