@charset "utf-8";

/*
 * File    : rwd-main.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 541~860px
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



/* **************************************** *
 * 541~860px: 태블릿 구간 본문 개행
 * **************************************** */
/* 태블릿 본문은 원문의 개행을 유지하고 개행 없는 문구만 폭으로 조정한다. */
@media (min-width: 541px) and (max-width: 860px){

    /* MATTERS */
    .main-matters .main-section__desc br,
    .main-matters .main-matters__list-txt p br { display: inline; }

    .main-matters .main-matters__list-txt > p { max-width: 520rem; margin-left: auto; margin-right: auto; text-wrap: balance; }

}



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

    /* LAYOUT: 좌우 거터는 rwd-layout 의 .wrap 패딩(40)이 담당. 마진을 겹치면 이중 거터가 된다 */

    /* STORIES */
    .main-stories__next { left: auto; right: 24rem; top: 222rem; background: var(--color-bg-100); }
    .main-stories__prev { right: auto; left: 24rem; top: 222rem; background: var(--color-bg-100); }

}



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

    /* MATTERS */
    .main-matters__list { gap: 64rem; }

    /* INSIGHT */
    .main-insight__inner { max-width: none; margin-left: var(--layout-gutter); margin-right: var(--layout-gutter); }

    .main-insight__list > li { padding: 24rem; }

    /* RESULT */
    .main-result__data { padding-top: 40rem; }

}



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

    /* LAYOUT: 좌우 거터는 rwd-layout 의 .wrap 패딩(24)이 담당 */
    .main-section__head { gap: 16rem; }
    .main-section__desc br { display: none; }

    /* VISUAL */
    .main-visual__desc { margin-top: 20rem; }
    .main-visual__desc br { display: none; }
    .main-visual__actions { margin-top: 40rem; }

    /* MATTERS */
    .main-matters { padding: 110rem 0 120rem; }

    .main-matters__list { flex-direction: column; gap: 72rem; margin-top: 72rem; margin-bottom: 96rem; }
    .main-matters__list-txt { margin-top: 40rem; }
    .main-matters__list-txt > p { margin-top: 16rem; }
    .main-matters__list-txt p br { display: none; } /* 영문 msgid 의 PC용 br 은 모바일에서 자연 랩핑 */
    html[lang="ko-KR"] .main-matters__list-txt p br { display: inline; } /* 국문 개행 위치는 전 구간 유지 */

    /* INSIGHT */
    .main-insight { padding: 240rem 0 110rem; }

    .main-insight__video:after { 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); }

    .main-insight__list { flex-wrap: wrap; gap: 16rem; margin-top: 96rem; margin-bottom: 64rem; }
    .main-insight__list > li { flex: 0 0 calc(50% - 8rem); }
    .main-insight__list-icon { width: 64rem; }

    /* RESULT: 모바일 순서는 타이틀 → 아코디언 → 스코어 카드 → CTA.
       data 를 display:contents 로 풀어 자식들을 inner 의 플렉스 아이템으로 만들어 재배열한다. PC 그리드는 불변 */
    .main-result { padding: 120rem 0; }

    .main-result__inner { display: flex; flex-direction: column; }
    .main-result__data { display: contents; }
    .main-result__data .main-section__head { order: 1; }
    .main-result__data .jt-accordion { order: 2; margin-top: 64rem; }
    .main-result__gallery { order: 3; margin-top: 24rem; } /* JS 미실행 폴백: 실배치는 mainResultGallery() 가 각 아코디언 항목 안으로 */
    .main-result__data .jt-btn__box,
    .main-result__data .jt-btn__gradient { order: 4; align-self: center; margin-top: 64rem; } /* CTA: about-exam 은 그라데이션 버튼 */
    .main-result__notice { order: 3; margin-top: 32rem; } /* 아코디언(2)과 CTA(4) 사이: 갤러리 폴백(3)은 평소 이사로 비어 있다 */

    /* 갤러리 카드: 각 아코디언 항목 콘텐츠 내부에서 풀블리드 밴드 (음수 마진 = 거터 24 + 콘텐츠 우측 패딩 40 상쇄).
       카드 스테이지는 --card-scale 재정의로 밴드 폭(기준 768)에 맞춘다 */
    /* 홈·about-exam 공용: 이 컴포넌트 규칙의 단일 원천. 페이지 파일에 사본을 만들지 말 것 */
    .main-result .jt-accordion__content-inner { padding: 0 40rem 0 0; } /* 패널이 항목 바닥(구분선)까지 밀착 */
    .main-result .jt-accordion__content-inner .main-result__gallery-item { margin: 24rem calc(-1 * var(--layout-gutter) - 40rem) 0 calc(-1 * var(--layout-gutter)); } /* 좌 24 = 거터, 우 64 = 거터 24 + 콘텐츠 우측 패딩 40: 카드 스테이지(768rem)가 뷰포트에 정확히 풀블리드 */
    .main-result__gallery-item { --card-scale: calc(768 / 708); height: calc(760rem * var(--card-scale)); border: 0; border-radius: 0; opacity: 1; visibility: visible; } /* 표시는 아코디언 접힘이 제어 */

    /* STORIES: 세로 그리드가 아니라 스와이프 캐러셀 유지 + 도트.
       슬라이드 수는 main.js Swiper breakpoints(모바일 1·태블릿 2)가 담당한다 */
    .main-stories { padding: 110rem 0 120rem; }
    .main-stories--refs-only { padding: 16rem 0 120rem; }

    .main-stories__slider { margin-top: 64rem; margin-bottom: 64rem; }

    .main-stories__item-link { gap: 28rem; }
    .main-stories__item-image { height: 240rem; }
    .main-stories__item-content { padding: 0 24rem 24rem; }

    .main-stories__prev,
    .main-stories__next { display: none; } /* 캐러셀 내비는 도트+스와이프만: 화살표는 한쪽만 남으면 안 된다 */
    .main-stories__dots { display: flex; }

    /* REFERENCES */
    .main-stories .jt-references { margin-top: 110rem; }

}



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

    /* LAYOUT: 모바일 거터 16. .wrap 은 rwd-layout 의 540 패딩(16)이 거터를 담당,
       insight inner 는 .wrap 이 아니라(패딩 없음) 마진으로 직접 16 을 준다 */
    .main-section__head { gap: 12rem; }
    /* 타이틀 블록·항목 텍스트(MATTERS) 좌우 여백 30: 거터 16 위에 14 를 더한다. 인사이트 타이틀은 여백 16 이라 제외 */
    .main-matters .main-section__head,
    .main-result .main-section__head,
    .main-stories .main-section__head { padding-left: 14rem; padding-right: 14rem; }
    .main-matters__list-txt > p { margin-top: 24rem; } /* 860 의 16 차단 */

    .main-section__actions { flex-direction: column; align-items: center; gap: 10rem; }

    /* VISUAL */
    .main-visual { align-items: flex-end; height: auto; min-height: 100vh; padding: 170rem 0 60rem; } /* 하단 정렬·pb60, 높이 뷰포트 100% (dvh 미사용) */

    /* KR 타이틀: 지정 줄바꿈("…시작하는 / …첫걸음") 첫 줄이 35px 에선 390px 로 컨테이너(358)를
       넘어 고아가 생긴다. 리빌이 br 단위로 줄을 굽기 때문에 크기로 맞춘다: 31px 에서 두 줄 성립 */
    html[lang="ko-KR"] .main-visual__title { --font-size-secondary-01: 31rem; }

    .main-visual__content { padding-top: 0; }
    /* 히어로 리드 : PC T4(21 Medium) → 모바일 T6(17 Regular)로 레벨이 바뀐다 */
    .main-visual__desc { margin-top: 30rem; } /* 타이틀 블록 내부 gap 30: 리드 80% 색은 main.css 베이스 담당 */
    .main-visual__actions { flex-direction: column; align-items: center; gap: 16rem; margin-top: 40rem; } /* 버튼만 중앙 정렬 (텍스트는 좌정렬) */

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

    .main-matters__list { gap: 100rem; margin-top: 80rem; margin-bottom: 80rem; }
    .main-matters__list-image { width: 240rem; }
    .main-matters__list-txt { margin-top: 40rem; padding-left: 14rem; padding-right: 14rem; }

    /* INSIGHT: 세로 적층이 아니라 가로 스크롤 카드(300px 스와이프).
       inner 의 좌우 마진(16)을 음수 마진으로 상쇄해 엣지-투-엣지로 넘기고 패딩으로 거터 복원 */
    .main-insight { padding: 432rem 0 60rem; } /* 상단 432(기준 390) = 텍스트 블록 시작점: 배경 눈 영상 가림 방지 */
    .main-insight .main-section__head { gap: 30rem; } /* 아이브로우↕제목·제목↕본문 각 30: 전역 12 위에 확대 */

    .main-insight__list { flex-wrap: nowrap; gap: 24rem; margin: 60rem calc(-1 * var(--layout-gutter)); padding: 0 var(--layout-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--layout-gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .main-insight__list::-webkit-scrollbar { display: none; }
    .main-insight__list > li { flex: 0 0 300rem; min-height: 260rem; padding: 30rem; scroll-snap-align: start; } /* p30: 1200 블록의 24 차단 */
    .main-insight__list-icon { width: 72rem; }

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

    /* REVIEW YOUR RESULTS 헤더/헤딩/리드 가운데정렬 (모바일: --secondary 좌측 되돌림, 아코디언은 좌측 유지) */
    .main-result__data .main-section__head { align-items: center; text-align: center; }

    /* 아코디언 첫 항목 상단 경계 */
    .main-result__data .jt-accordion > li:first-child { border-top: 1px solid var(--color-gray-300); }

    .main-result__data .jt-accordion { margin-top: 80rem; }
    .main-result__data .jt-btn__box,
    .main-result__data .jt-btn__gradient { margin-top: 80rem; }
    .main-result__data .jt-btn__gradient { min-height: 60rem; } /* 서브 CTA 공통 최소 높이: rwd-strap 전역(50)보다 우선 */

    .main-result__gallery-item { --card-scale: calc(390 / 708); height: calc(760rem * var(--card-scale)); } /* 카드 아래 흐름 콘텐츠가 없어 높이를 명시한다 */

    /* STORIES */
    .main-stories { padding: 100rem 0; }
    .main-stories--refs-only { padding: 16rem 0 100rem; }

    .main-stories__slider { margin-top: 48rem; margin-bottom: 48rem; }

    .main-stories__item-link { gap: 24rem; }
    .main-stories__item-image { height: 300rem; }
    .main-stories__item-content { padding: 0 30rem 30rem; gap: 24rem; } /* 860 의 24 차단 */

    /* REFERENCES */
    .main-stories .jt-references { margin-top: 80rem; }

}