@charset "utf-8";

/*
 * File    : rwd-result-sheet.css
 * Author  : STUDIO-JT
 *
 * NOTE :
 * 리포트는 폭 820rem 을 유지한 채 --rs-scale + transform: scale() 로 축소한다.
 * 하이라이트·핫스팟 좌표는 % 지만, 리포트 안의 장식 값(라운드·테두리·좌우 인셋)이 rem 고정이라
 * 폭만 줄이면 이미지와 비율이 어긋난다.
 * 860/540 밴드는 flex column + order로 세로 스택(타이틀-페이징-리포트-가이드),
 * 스케일로 생기는 레이아웃 박스 여백은 음수 margin-bottom(calc)으로 보상.
 *
 * SUMMARY :
 * 1480px (GLOBAL, REPORT, TITLE)
 * 1200px (GLOBAL, VISUAL, REPORT, TITLE, PAGING, GUIDE)
 * 860px (GLOBAL, VISUAL, PATTERN, REPORT, TITLE, PAGING, GUIDE)
 * 540px (GLOBAL, VISUAL, REPORT, TITLE, PAGING, GUIDE)
 */



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

    /* GLOBAL */
    .result-sheet { --font-size-secondary-01: 60rem; --font-size-secondary-03: 46rem; }

    /* REPORT */
    .result-sheet__container { grid-template-columns: 820rem 460rem; column-gap: 40rem; }

    /* TITLE */
    .result-sheet__aside { width: 460rem; }

}



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

    /* GLOBAL */
    .result-sheet { --rs-scale: calc(656 / 820); --font-size-secondary-01: 52rem; --font-size-secondary-03: 40rem; }

    .result-sheet__container { grid-template-columns: 700rem 420rem; column-gap: 0; padding-bottom: 80rem; }
    .result-sheet__actions { padding-bottom: 185rem; }
    .result-sheet--no-stories .result-sheet__container { padding-bottom: 185rem; }

    /* VISUAL */
    .result-sheet__visual { min-height: 680rem; }
    .result-sheet__visual-content { padding-top: 250rem; }

    /* REPORT */
    /* scale 은 레이아웃 박스를 줄이지 않으므로 음수 margin 으로 차이를 상쇄한다 */
    .result-sheet__report { transform: scale(var(--rs-scale)); transform-origin: 0 0; margin-bottom: calc(1164rem * (var(--rs-scale) - 1)); }

    /* TITLE */
    .result-sheet__aside { width: 420rem; }

    /* PAGING */
    .result-sheet__paging { margin-top: 32rem; }

    /* GUIDE */
    .result-sheet__guide { margin-top: 44rem; }

}



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

    /* GLOBAL */
    .result-sheet { --rs-scale: calc(720 / 820); --font-size-secondary-01: 46rem; --font-size-secondary-03: 36rem; --font-size-primary-04: 17rem; }

    /* align-items·justify-content 재설정 필수: base 의 grid 정렬값이 flex 에도 그대로 먹어 자식이 stretch 대신 글자 폭이 된다 */
    .result-sheet__container { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; padding: 64rem 24rem 60rem; }
    .result-sheet__actions { padding-bottom: 110rem; }
    .result-sheet--no-stories .result-sheet__container { padding-bottom: 110rem; }

    /* VISUAL */
    .result-sheet__visual { min-height: 400rem; }
    .result-sheet__visual-content { gap: 28rem; width: auto; padding-top: 180rem; margin: 0 24rem; }

    /* 데스크톱 <br> 분절 해제 : JS(textFillReveal)가 br을 .jt-fill__line 블록으로 치환하므로 inline 전환으로 자연 랩핑 */
    .result-sheet__visual-desc br { display: none; }
    .result-sheet__visual-desc .jt-fill__line { display: inline; }
    .result-sheet__visual-desc .jt-fill__line:not(:last-child):after { content: ' '; }

    /* PATTERN */
    .result-sheet__pattern { display: none; }

    /* REPORT */
    .result-sheet__report { order: 3; margin: 0 0 calc(40rem + 1164rem * (var(--rs-scale) - 1)); }

    /* TITLE */
    .result-sheet__aside,
    .result-sheet__aside-sticky { display: contents; } /* 모바일: 스티키 해제, 자식들이 order 흐름으로 복귀 */

    .result-sheet__title { order: 1; align-items: center; margin: 0 0 48rem; text-align: center; }

    /* PAGING */
    .result-sheet__paging { order: 2; justify-content: center; margin: 0 0 44rem; }

    /* GUIDE */
    .result-sheet__guide { order: 4; margin: 0 0 44rem; }

    /* SELECT : 터치 타깃 확장(시각 크기 유지) */
    .result-sheet__select-toggle { width: 44rem; height: 44rem; margin: -10rem; padding: 21rem 13rem; }
    .result-sheet__select-toggle:before,
    .result-sheet__select-toggle:after { left: 13rem; }
    .result-sheet__select-toggle:before { top: 16rem; }
    .result-sheet__select-toggle:after { bottom: 16rem; }

    /* MENU : 터치 타깃 확장(시각 크기 유지) */
    .result-sheet__menu-close { width: 44rem; height: 44rem; margin: -10rem; }
    .result-sheet__menu-close:before,
    .result-sheet__menu-close:after { top: 21rem; left: 12rem; }

}



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

    /* GLOBAL */
    .result-sheet { --rs-scale: calc(358 / 820); --font-size-secondary-01: 35rem; --font-size-secondary-03: 26rem; --font-size-primary-04: 17rem; --font-size-primary-05: 16rem; --font-size-primary-06: 14rem; } /* T1 35 / 리드 T5·T6 17 / T7·T8 16 / T10·T11 14, 리포트 w-full=358 */

    .result-sheet__container { padding: 64rem 16rem 50rem; }
    .result-sheet__actions { padding-bottom: 90rem; }
    .result-sheet--no-stories .result-sheet__container { padding-bottom: 90rem; }

    /* VISUAL */
    .result-sheet__visual { min-height: 500rem; }
    /* 거터 16(860 의 24 재정의) 안쪽에 콘텐츠 패딩 20 → 콘텐츠 폭 318 */
    .result-sheet__visual-content { gap: 30rem; margin: 0 16rem; padding: 160rem 20rem 0; }

    /* REPORT : 아래 30 = 리포트↔Section 간격 */
    .result-sheet__report { margin-bottom: calc(30rem + 1164rem * (var(--rs-scale) - 1)); }

    /* TITLE : 아래 60 = Title→Result 간격 */
    .result-sheet__title { gap: 30rem; margin-bottom: 60rem; }

    /* PAGING : 아래 30 = Paging→리포트 간격 */
    .result-sheet__paging { margin-bottom: 30rem; }

    /* GUIDE */
    .result-sheet__guide { gap: 20rem; margin-bottom: 60rem; }

}