@charset "utf-8";

/*
 * File    : rwd-strap.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 1200px
 * 860px
 * 540px
 */



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

    /* FORM */
    .choices__inner { padding-top: 11rem; padding-bottom: 11rem; }
    .choices[data-type*=select-one] .choices__inner { padding-bottom: 11rem; }
    .choices[data-type*=select-one]::after { background-size: 15rem auto; }
    .choices__list--dropdown .choices__item,
    .choices__list[aria-expanded] .choices__item { padding-top: 9rem; padding-bottom: 9rem; }
    html.mobile .jt-choices__wrap:before { width: 15rem; height: 15rem; }
    html.mobile .jt-choices__wrap > select { height: 54rem; line-height: 52rem; }

    /* BUTTON */
    .jt-btn__gradient { min-height: 56rem; }

}



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

    /* TYPOGRAPHY: PC·모바일 가이드 사이 중간값 (기준폭 768, 가이드 미정의 구간이라 보간) */
    :root {
        --font-size-primary-01: 27rem;
        --font-size-primary-02: 22rem;
        --font-size-primary-03: 20rem;
        --font-size-secondary-01: 48rem;
        --font-size-secondary-02: 44rem;
        --font-size-secondary-03: 36rem;
        --font-size-secondary-04: 32rem;
    }

    /* 대표 후기 제목은 크기만 한 단계 줄이고 기존 T1 자간을 유지한다. */
    .jt-typo--story-featured { font-size: var(--font-size-primary-02); line-height: var(--font-lineheight-primary-01); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-02); }

    /* FORM */
    .choices__list--dropdown .choices__item,
    .choices__list[aria-expanded] .choices__item { padding-top: 8rem; padding-bottom: 8rem; }
    html.mobile .jt-choices__wrap > select { height: 52rem; line-height: 50rem; }

    /* PAGINATION */
    .jt-pagination { margin-top: 48rem; }

    .jt-pagination .jt-pagination__numbers { min-width: 24rem; margin: 0 7rem; }
    .jt-pagination .jt-pagination__numbers .jt-icon { width: 11rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--prev { margin-left: 3rem; margin-right: 6rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: 6rem; margin-right: 3rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--first,
    .jt-pagination .jt-pagination__numbers.jt-pagination--last { margin-left: 3rem; margin-right: 3rem; }

    /* SHARE */
    .jt-share .jt-share__item { width: 44rem; height: 44rem; }
    .jt-share .jt-share__item .jt-icon { width: 22rem; }

    .jt-share__tooltip { padding-left: 34rem; padding-right: 34rem; bottom: 32rem; }

    /* BUTTON */
    .jt-btn__box { padding: 11rem 40rem 11rem 24rem; } /* radius 12·h48 유지 */
    .jt-btn__box-icon--left { left: 18rem; }
    .jt-btn__box-icon--right { right: 18rem; }

    .jt-btn__gradient { min-height: 52rem; padding: 0 44rem 0 26rem; border-radius: 14rem; }

    /* REFERENCES */
    .jt-references { gap: 14rem; }
    .jt-references__title { padding: 12rem 0; }
    .jt-references__list { gap: 8rem; }
    .jt-references__list > li:before { width: 28rem; padding-top: 4rem; } /* 링크 상단 패딩(아래)과 짝: 안 맞추면 번호가 4px 위로 뜬다 */
    .jt-references__list > li a { padding: 4rem 0; } /* inline 세로 패딩: 레이아웃 불변, 탭 영역만 확장 */

}



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

    /* TYPOGRAPHY: 모바일 가이드 (기준폭 390)
       행간 배수는 PC 와 같아 크기만 덮는다. 세리프는 T2·T3 행간이 1.1 → 1.2 로 달라진다.
       secondary-04·primary 05~07 은 가이드 미정의/동일: 04 만 T3 비율로 보간.
       한국어판 세리프 행간은 jt-strap 의 html[lang] 블록이 명시도로 이겨 그대로 유지된다. */
    html[lang="ko-KR"] .jt-typo-secondary--01 { letter-spacing: -0.01em; } /* 모바일 KR 가이드 T1 자간 -1%: PC 의 -2% 복귀 */
    :root {
        --font-size-primary-01: 24rem;
        --font-size-primary-02: 21rem;
        --font-size-primary-03: 19rem;
        --font-size-primary-04: 17rem;
        --font-size-secondary-01: 35rem;
        --font-size-secondary-02: 33rem;
        --font-size-secondary-03: 26rem;
        --font-size-secondary-04: 24rem;
        --font-lineheight-secondary-02: 1.2;
        --font-lineheight-secondary-03: 1.2;
        --font-lineheight-secondary-04: 1.2;
    }

    /* 모바일 리드는 T6, 다음 후기 링크는 T1의 자간을 유지하는 축소 타입이다. */
    .jt-typo--lead { font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-01); }
    .jt-typo--story-next { font-size: var(--font-size-primary-02); line-height: var(--font-lineheight-primary-01); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-02); }

    /* FORM */
    .choices__inner { padding: 10rem 46rem 10rem 15rem; }
    .choices[data-type*=select-one] .choices__inner { padding-bottom: 10rem; }
    .choices[data-type*=select-one]::after { width: 46rem; background-size: 13rem auto; }
    .choices__list--dropdown .choices__item,
    .choices__list[aria-expanded] .choices__item { padding: 7rem 15rem; }
    html.mobile .jt-choices__wrap:before { width: 13rem; height: 13rem; right: 17rem; }
    html.mobile .jt-choices__wrap > select { height: 48rem; padding: 0 46rem 0 15rem; line-height: 46rem; }

    /* PAGINATION */
    .jt-pagination { margin-top: 42rem; }

    .jt-pagination .jt-pagination__numbers { min-width: 22rem; margin: 0 6rem; }
    .jt-pagination .jt-pagination__numbers .jt-icon { width: 10rem; top: 50%; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--prev { margin-left: 2rem; margin-right: 5rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: 5rem; margin-right: 2rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--first,
    .jt-pagination .jt-pagination__numbers.jt-pagination--last { margin-left: 2rem; margin-right: 2rem; }

    /* SHARE */
    .jt-share { gap: 8rem; }
    .jt-share .jt-share__item { width: 40rem; height: 40rem; }
    .jt-share .jt-share__item .jt-icon { width: 18rem; }

    /* BUTTON */
    .jt-btn__box { padding: 11rem 38rem 11rem 22rem; } /* h48 유지 */
    .jt-btn__box-icon { width: 15rem; top: calc(50% - 7.5rem); }
    .jt-btn__box-icon--left { left: 16rem; }
    .jt-btn__box-icon--right { right: 16rem; }

    .jt-btn__gradient { min-height: 50rem; padding: 0 44rem 0 24rem; }

    /* REFERENCES */
    .jt-references { gap: 12rem; }
    .jt-references__title { padding: 10rem 0; }
    .jt-references__list > li:before { width: 26rem; }

}