@charset "utf-8";

/*
 * File    : jt-strap.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * A11Y __
 * TYPOGRAPHY __
 * JT GUIDE __
 * BUTTON __
 * FORM __
 * PAGINATION
 * SHARE
 * SWIPER
 * LAZYLOAD __
 * VIDEO __
 * ACCORDION LIST __
 * REFERENCES __
 * TEXT MOTION
 * HOVER
 */



/* **************************************** *
 * A11Y
 * **************************************** */
.sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; }

#skip a { width: 1rem; height: 1rem; position: absolute; left: -10000rem; top: auto; overflow: hidden; }
#skip a:focus { display: block; width: 100%; height: 50rem; padding: 0 24rem; position: fixed; top: 0; left: 0; line-height: 50rem; text-align: center; color: var(--color-white); background: var(--color-black); z-index: 999; } /* 글자 크기·굵기는 마크업의 jt-typo 클래스. 행간을 높이와 같게 둬 글자를 세로 가운데에 둔다(flex 가운데 정렬은 배율에 따라 글자가 1px 어긋난다) */



/* **************************************** *
 * TYPOGRAPHY
 * **************************************** */
.jt-typo--secondary { font-family: var(--font-secondary); }

.jt-typo--01,
.jt-typo--story-featured,
.jt-typo--story-next { font-size: var(--font-size-primary-01); line-height: var(--font-lineheight-primary-01); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-02); }
.jt-typo--02 { font-size: var(--font-size-primary-01); line-height: var(--font-lineheight-primary-01); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-02); }
.jt-typo--03 { font-size: var(--font-size-primary-02); line-height: var(--font-lineheight-primary-02); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-01); }
.jt-typo--04,
.jt-typo--lead { font-size: var(--font-size-primary-03); line-height: var(--font-lineheight-primary-03); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-01); }
.jt-typo--05 { font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-01); }
.jt-typo--06 { 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--07 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-01); }
.jt-typo--08 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-01); }
.jt-typo--09 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-01); }
.jt-typo--10 { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-01); }
.jt-typo--11 { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-01); }
.jt-typo--12 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-01); }
.jt-typo--13 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-01); }

.jt-typo-secondary--01 { font-size: var(--font-size-secondary-01); line-height: var(--font-lineheight-secondary-01); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-secondary); }
.jt-typo-secondary--02 { font-size: var(--font-size-secondary-02); line-height: var(--font-lineheight-secondary-02); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-secondary); }
.jt-typo-secondary--03 { font-size: var(--font-size-secondary-03); line-height: var(--font-lineheight-secondary-03); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-secondary); }
.jt-typo-secondary--04 { font-size: var(--font-size-secondary-04); line-height: var(--font-lineheight-secondary-04); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-secondary); }

/* 인용문 타입: 로케일 변형도 네 속성을 같은 스코프에서 관리한다. */
.jt-typo-secondary--quote {
    --font-size-quote: var(--font-size-secondary-04);
    --font-lineheight-quote: var(--font-lineheight-secondary-04);
    --font-weight-quote: 500;
    --letter-spacing-quote: var(--letter-spacing-secondary);
}
.jt-typo-secondary--quote { font-size: var(--font-size-quote); line-height: var(--font-lineheight-quote); font-weight: var(--font-weight-quote); letter-spacing: var(--letter-spacing-quote); }

/*
 * 한국어판은 한글 글리프가 있는 서체를 쓴다. 본문은 라틴·숫자를 PretendardStd 가, 한글을 Pretendard(font-ko.css)가 그리고,
 * 세리프는 KoPub바탕과 국문 행간·자간을 쓴다.
 * 편집기 언어가 콘텐츠 서체에 영향을 주지 않도록 프론트 전용 파일에서 설정한다.
 * 편집 화면은 사이트 로케일을 기준으로 functions/blocks.php 에서 별도 적용한다.
 */
html[lang="ko-KR"] {
    --font-primary: 'PretendardStd', 'Pretendard', sans-serif;
    --font-secondary: 'KoPubBatang', serif;
    --font-lineheight-secondary-01: 1.2;
    --font-lineheight-secondary-02: 1.2;
    --font-lineheight-secondary-03: 1.3;
    --font-lineheight-secondary-04: 1.3;
    --letter-spacing-secondary: -0.01em;
}

/* KoPub바탕 굵기는 Regular: 세리프 크기 클래스의 500 을 KR 에서 400 으로 (요소는 두 클래스를 함께 가진다) */
html[lang="ko-KR"] .jt-typo--secondary { font-weight: var(--font-weight-regular); }

/* 국문 세리프 제목·인용은 어절 단위로 끊겨(keep-all) 좁은 폭에서 한두 어절만 다음 줄에 남는다.
   pretty 는 <br> 로 나눈 구간마다 줄을 다시 나눈다. Chromium 은 짧은 마지막 줄만 고치고, Safari 는 구간 전체의 줄 길이를 고르게 맞춘다.
   지원하지 않는 브라우저(Firefox)는 지금 줄바꿈 그대로다. */
html[lang="ko-KR"] .jt-typo--secondary { text-wrap: pretty; }

/* T1 자간만 -2% (PC 가이드): 모바일 가이드는 -1% 라 rwd-strap 모바일 밴드에서 복귀 */
html[lang="ko-KR"] .jt-typo-secondary--01 { letter-spacing: -0.02em; }

/* 국문 인용문은 기본 세리프 크기의 40/42 비율로 반응형 축소를 유지한다. */
html[lang="ko-KR"] .jt-typo-secondary--quote {
    --font-size-quote: calc(var(--font-size-secondary-04) * 40 / 42);
    --font-lineheight-quote: 1.2;
    --font-weight-quote: 400;
    --letter-spacing-quote: var(--letter-spacing-secondary);
}

/* 한글은 기울임을 쓰지 않는다: 한글 서체엔 이탤릭 자면이 없어 합성 기울임으로 조형이 깨진다.
   em 의 강조 의미(시맨틱)는 유지하고 표시만 정자로. */
html[lang="ko-KR"] em,
html[lang="ko-KR"] i { font-style: normal; }

/* SUP */
sup { position: relative; top: -0.65em; font-size: 0.6em; }



/* **************************************** *
 * JT GUIDE
 * **************************************** */
/* ICON */
.jt-icon { display: inline-block; }
.jt-icon svg { display: block; width: 100%; height: auto; }
.jt-icon svg path { fill: var(--color-black); transition: fill .3s; }



/* **************************************** *
 * BUTTON
 * **************************************** */
/* BOX */
.jt-btn__box { display: inline-flex; padding: 11rem 44rem 11rem 26rem; position: relative; color: var(--color-white); background: var(--color-primary); border: 2rem solid var(--color-primary); border-radius: 12rem; overflow: hidden; cursor: pointer; transition: color .3s, background-color .3s, border-color .3s; }
.jt-btn__box > span { display: inline-block; position: relative; transition: transform .3s cubic-bezier(.34, 1.85, .64, 1); }
.jt-btn__box-icon { width: 16rem; position: absolute; top: calc(50% - 8rem); transition: transform .5s cubic-bezier(.34, 2.00, .64, 1); }
.jt-btn__box-icon svg path { fill: currentColor; }
.jt-btn__box-icon--left { left: 20rem; transform: translateX(-18rem); opacity: 0; }
.jt-btn__box-icon--right { right: 20rem; }

.jt-btn__box.jt-btn--type-02 { background: transparent; border-color: var(--color-white); }

/* GRADIENT */
/*
 * 각도·색을 @property 로 등록해야 키프레임에서 끊기지 않고 보간된다.
 * initial-value 에는 var() 를 쓸 수 없어 hex 를 적지만, 실제로 그려지는 색은 var.css 의 --color-accent-* 다.
 * @property 미지원 브라우저는 첫 프레임 그라디언트로 멈춰 보인다.
 */
@property --gradient-deg { syntax: '<angle>'; inherits: false; initial-value: 259deg; }
@property --gradient-color-01 { syntax: '<color>'; inherits: false; initial-value: #ed481f; }
@property --gradient-color-02 { syntax: '<color>'; inherits: false; initial-value: #ec717f; }

.jt-btn__gradient { display: inline-flex; align-items: center; min-height: 60rem; padding: 0 48rem 0 30rem; position: relative; color: var(--color-white); border-radius: 16rem; overflow: hidden; }
.jt-btn__gradient:before { content: ''; position: absolute; inset: 0; --gradient-deg: 259deg; --gradient-color-01: var(--color-accent-100); --gradient-color-02: var(--color-accent-200); background: linear-gradient(var(--gradient-deg), var(--gradient-color-01), var(--gradient-color-02)); animation: jt-btn-gradient 5s linear infinite; }

/* Gradient 1 → 2 → 3 → 1 순환 */
@keyframes jt-btn-gradient {
    0%     { --gradient-deg: 259deg; --gradient-color-01: var(--color-accent-100); --gradient-color-02: var(--color-accent-200); }
    33.33% { --gradient-deg: 173deg; --gradient-color-01: var(--color-accent-500); --gradient-color-02: var(--color-accent-600); }
    66.66% { --gradient-deg: 45deg;  --gradient-color-01: var(--color-accent-300); --gradient-color-02: var(--color-accent-400); }
    100%   { --gradient-deg: 259deg; --gradient-color-01: var(--color-accent-100); --gradient-color-02: var(--color-accent-200); }
}

@media (prefers-reduced-motion: reduce) { .jt-btn__gradient:before { animation: none; } }

.jt-btn__gradient > span { position: relative; z-index: 2; transition: transform .3s cubic-bezier(.34, 1.85, .64, 1); }
.jt-btn__gradient-icon { width: 16rem; height: 16rem; position: absolute; z-index: 2; top: calc(50% - 8rem); transition: transform .5s cubic-bezier(.34, 2.00, .64, 1); } /* 화살표 등장 모션: jt-btn__box와 동일 메커니즘(좌 대기/우 표시) */
.jt-btn__gradient-icon svg { display: block; width: 100%; height: 100%; }
.jt-btn__gradient-icon svg path { fill: var(--color-white); }
.jt-btn__gradient-icon--left { left: 24rem; transform: translateX(-18rem); opacity: 0; }
.jt-btn__gradient-icon--right { right: 24rem; }



/* **************************************** *
 * FORM
 * **************************************** */
/* CHOICES */
.jt-choices__wrap { position: relative; }

html.desktop .jt-choices { opacity: 0; } /* fix FOUC */

.choices { margin-bottom: 0; font-size: var(--font-size-primary-05); }
.choices__inner { display: block; min-height: inherit; padding: 9rem 44rem 9rem 15rem; font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-01); color: var(--color-black); background: var(--color-bg-100); border: 1px solid var(--color-gray-500); border-radius: 0; transition: border-color .3s; }
.choices__placeholder { color: var(--color-black); opacity: 1; }

.choices[data-type*=select-one] .choices__inner { padding-bottom: 9rem; }
.choices[data-type*=select-one]::after { content: ''; width: 44rem; height: 100%; margin: 0; right: 0; top: 0; border: none; background: url(../images/icon/icon-select.svg) no-repeat center center; background-size: 12rem auto; opacity: .4; transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); }

.choices__list--single { display: block; padding: 0; }

.choices__list--dropdown,
.choices__list[aria-expanded] { background: var(--color-bg-100); border: 1px solid var(--color-black); border-radius: 0; }
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item { padding: 10rem 15rem; font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-01); color: var(--color-gray-600); transition: color .3s, background-color .3s; }

.is-open .choices__inner,
.is-flipped.is-open .choices__inner { border-radius: 0; }

.is-focused .choices__inner,
.is-open .choices__inner { border-color: var(--color-black); }

.choices[data-type*=select-one].is-open::after { margin-top: 0; border: none; transform: rotate(-180deg); opacity: 1; }

.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] { border-color: inherit; }

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted { color: var(--color-black); background: var(--color-brown-500); }
.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-selected { color: var(--color-black); }

html.mobile .jt-choices__wrap { background: var(--color-bg-100); overflow: hidden; }
html.mobile .jt-choices__wrap:before { content: ''; width: 12rem; height: 12rem; position: absolute; top: 50%; right: 16rem; background: url(../images/icon/icon-select.svg) no-repeat center center; background-size: contain; transform: translate(0, -50%); opacity: .4; }
html.mobile .jt-choices__wrap > select { appearance: none; width: 100%; margin: 0; height: 42rem; padding: 0 44rem 0 15rem; position: relative; font-family: var(--font-primary); font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-01); color: var(--color-black); background: transparent; border: 1px solid var(--color-gray-500); border-radius: 0; outline: none; box-shadow: none; opacity: 1; box-sizing: border-box; }
html.mobile .jt-choices__wrap > select:focus { border-color: var(--color-black); }

/* ZIP 자동완성 (jt-zipfill.js: 문의 폼 3리전 공용) */
.jt-zipfill { position: relative; }
.jt-zipfill__list { width: 100%; margin: 0; padding: 0; position: absolute; top: calc(100% - 1px); left: 0; z-index: 20; list-style: none; background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: 0 0 12rem 12rem; overflow: hidden; }
.jt-zipfill__list > li { padding: 10rem 18rem; font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); letter-spacing: var(--letter-spacing-01); color: var(--color-black); cursor: pointer; }
.jt-zipfill__list > li > b { font-weight: var(--font-weight-bold); }
.jt-zipfill__list > li > span { margin-left: 8rem; color: var(--color-gray-700); }
.jt-zipfill__list > li.jt-zipfill--focus { background: var(--color-gray-100); }



/* **************************************** *
 * PAGINATION
 * **************************************** */
.jt-pagination { margin-top: 60rem; font-size: 0; text-align: center; }
.jt-pagination:empty { margin-top: 0; }

.jt-pagination .jt-pagination__numbers { display: inline-block; vertical-align: top; min-width: 26rem; height: 28rem; margin: 0 8rem; position: relative; line-height: 28rem; color: var(--color-gray-600); transition: color .3s; } /* 글자 크기·굵기는 마크업의 jt-typo 클래스. 행간을 높이와 같게 둬 숫자를 세로 가운데에 둔다(flex 가운데 정렬은 배율에 따라 숫자가 1px 어긋난다) */
.jt-pagination .jt-pagination__numbers:after { content: ''; display: block; width: 47%; height: 2rem; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); box-sizing: border-box; }
.jt-pagination .jt-pagination__numbers .jt-icon { width: 12rem; position: absolute; top: calc(50% - 1rem); left: 50%; transform: translate(-50%, -50%); }
.jt-pagination .jt-pagination__numbers.jt-pagination--prev { margin-left: 4rem; margin-right: 7rem; }
.jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: 7rem; margin-right: 4rem; }
.jt-pagination .jt-pagination__numbers.jt-pagination--first,
.jt-pagination .jt-pagination__numbers.jt-pagination--last { margin-left: 4rem; margin-right: 4rem; }

.jt-pagination .jt-pagination__numbers.jt-pagination--current { color: var(--color-black); }
.jt-pagination .jt-pagination__numbers.jt-pagination--current:after { background: var(--color-black); }



/* **************************************** *
 * SHARE
 * **************************************** */
.jt-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 12rem; }
.jt-share .jt-share__item { display: block; width: 46rem; height: 46rem; position: relative; background: var(--color-gray-200); border-radius: 50%; transition: .3s; }
.jt-share .jt-share__item .jt-icon { display: block; width: 24rem; margin: 0 auto; position: relative; top: 50%; transform: translate(0, -50%); }

/* CLIPBOARD */
.jt-share__tooltip { width: max-content; max-width: calc(100% - var(--layout-gutter) * 2); padding: 15rem 40rem; position: fixed; left: 50%; bottom: 40rem; text-align: center; background: var(--color-black); z-index: 501; transform: translate(-50%, 0); opacity: 0; visibility: hidden; } /* 한 줄에 들어가면 한 줄, 넘치면 화면 안에서 줄바꿈 */
.jt-share__tooltip p { color: var(--color-white); }



/* **************************************** *
 * SWIPER
 * **************************************** */
.swiper { height: 100%; }



/* **************************************** *
 * LAZYLOAD
 * **************************************** */
img[data-unveil] { opacity: 0; transition: opacity .3s; }
.jt-lazyload--loaded img[data-unveil],
img[data-unveil].jt-lazyload--loaded { opacity: 1; }

.jt-lazyload { position: relative; overflow: hidden; }
.jt-lazyload img { display: block; width: 100%; position: absolute; left: 0; top: 0; }
.jt-lazyload.jt-lazyload--loaded img,
.jt-lazyload img.jt-lazyload--loaded { height: auto; }

/* COLOR PREVIEW */
.jt-lazyload__color-preview { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-bg-200); }
.jt-lazyload.jt-lazyload--loaded .jt-lazyload__color-preview { background: transparent; transition: background-color .1s; transition-delay: .3s; }



/* **************************************** *
 * VIDEO
 * **************************************** */
/* NATIVE BACKGROUND VIDEO */
.jt-background-video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.jt-background-video__vod { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; transform: translateZ(0); }
.jt-background-video__vod:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.jt-background-video__vod video { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }
.jt-background-video__poster { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center center; background-size: cover; }
.jt-background-video__fallback { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; } /* 스크립트가 없을 때 포스터(<noscript>) */



/* **************************************** *
 * ACCORDION LIST
 * **************************************** */
.jt-accordion { display: flex; flex-wrap: wrap; border-top: 1px solid var(--color-gray-300); }
.jt-accordion__item { width: 100%; border-bottom: 1px solid var(--color-gray-300); }

/* 헤드는 제목(h3) 안의 button 이다: 제목 타이포를 그대로 물려받고, 흐림(.5)은 버튼 한 곳에서 준다(컨트롤 아이콘 포함) */
.jt-accordion__head { display: block; width: 100%; margin: 0; padding: 16rem 60rem 16rem 0; position: relative; font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; background: none; border: 0; cursor: pointer; opacity: 0.5; transition: opacity .3s; }
.jt-accordion__head:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; opacity: 1; }
.jt-accordion__control { width: 20rem; height: 20rem; position: absolute; top: 19rem; right: 22rem; transition: opacity .3s; }
.jt-accordion__control:before { position: absolute; content: ''; width: 12rem; height: 2rem; top: 50%; left: 50%; translate: -50% -50%; background: var(--color-black); }
.jt-accordion__control:after { position: absolute; content: ''; width: 2rem; height: 12rem; top: 50%; left: 50%; translate: -50% -50%; background: var(--color-black); transition: rotate .3s; }

.jt-accordion__content { position: relative; overflow: hidden; }
.jt-accordion__content-inner { padding: 0 60rem 24rem 0; }

.jt-accordion .jt-accordion__item:not(:first-child) .jt-accordion__content .jt-accordion__content-inner { display: none; }

/* ACTIVE: 열림 전용 아코디언이라 닫기 액션이 없으므로 컨트롤 아이콘 숨김 + 클릭 불가 커서 */
.jt-accordion__item.jt-accordion--active .jt-accordion__head { cursor: default; opacity: 1; }
.jt-accordion__item.jt-accordion--active .jt-accordion__control { opacity: 0; }



/* **************************************** *
 * REFERENCES
 * **************************************** */
.jt-references { display: flex; flex-direction: column; gap: 16rem; }

.jt-references__title { display: block; padding: 16rem 0; color: var(--color-brown-200); border-bottom: 1px solid var(--color-brown-200); }

.jt-references__list { display: flex; flex-direction: column; gap: 6rem; counter-reset: references; }
.jt-references__list > li { display: flex; align-items: start; counter-increment: references; overflow-wrap: anywhere; } /* 'AHA/ACC/AACVPR/…' 같은 슬래시 연결 토큰은 keep-all 로 줄바꿈되지 않아 모바일에서 컨테이너를 넘친다 */
.jt-references__list > li:before { content: '(' counter(references) ')'; flex-shrink: 0; width: 30rem; color: var(--color-black); }
.jt-references__list > li a { color: var(--color-brown-200); transition: color .3s; }



/* **************************************** *
 * TEXT MOTION
 * **************************************** */
.jt-reveal__mask { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.jt-reveal__line { display: block; }

/* 히어로 FOUC 방지 : 첫 페인트부터 숨겨 'h1이 보였다 사라졌다 다시 등장'하는 깜빡임 제거.
   모든 히어로 모션이 from-state를 잡은 뒤 main.js가 html의 jt-preveal을 제거해 해제한다.
   목록을 바꾸면 main.js 의 PREVEAL_TARGETS 도 같게 바꾼다(tests/test-fonts-ready.js 가 비교한다). */
html.jt-preveal .main-visual__title,
html.jt-preveal .main-visual__desc,
html.jt-preveal .main-visual__actions,
html.jt-preveal .heart-risk__visual-title,
html.jt-preveal .heart-risk__visual-desc,
html.jt-preveal .about-exam__visual-title,
html.jt-preveal .about-exam__visual-desc,
html.jt-preveal .get-tested__visual-title,
html.jt-preveal .get-tested__visual-desc,
html.jt-preveal .result-sheet__visual-title,
html.jt-preveal .result-sheet__visual-desc,
html.jt-preveal .patient-stories__visual-title,
html.jt-preveal .patient-stories__visual-desc,
html.jt-preveal .stories-single__visual-title,
html.jt-preveal .stories-single__visual-date,
html.jt-preveal .contact-us__visual-title,
html.jt-preveal .contact-us__visual-sub,
html.jt-preveal .contact-us__visual-desc,
html.jt-preveal .privacy-policy__title { visibility: hidden; }

.jt-fill__line { display: block; padding-bottom: .18em; margin-bottom: -.18em; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, var(--jt-fill-color, var(--color-black)) 42%, var(--color-primary) 46%, var(--color-primary) 50%, var(--color-gray-400) 54%); background-size: 250% 100%; background-position: 100% 50%; }



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

    /* BUTTON */
    .jt-btn__box:hover > span { transform: translate3d(18rem, 0, 0); }
    .jt-btn__box:hover > .jt-btn__box-icon--left { transform: translateX(0); opacity: 1; }
    .jt-btn__box:hover > .jt-btn__box-icon--right { transform: translateX(18rem); opacity: 0; }
    .jt-btn__box.jt-btn--type-01:hover { background: var(--color-brown-200); border-color: var(--color-brown-200); }
    .jt-btn__box.jt-btn--type-02:hover { background: var(--color-white); color: var(--color-primary); }
    .jt-btn__gradient:hover > span { transform: translate3d(18rem, 0, 0); }
    .jt-btn__gradient:hover > .jt-btn__gradient-icon--left { transform: translateX(0); opacity: 1; }
    .jt-btn__gradient:hover > .jt-btn__gradient-icon--right { transform: translateX(18rem); opacity: 0; }

    /* FORM */
    .choices:hover .choices__inner { border-color: var(--color-black); }

    /* REFERENCES */
    .jt-references__list > li a:hover { color: var(--color-primary); text-decoration: underline; }

    /* SHARE */
    .jt-share .jt-share__item:hover { background: var(--color-primary); }
    .jt-share .jt-share__item:hover .jt-icon svg path { fill: var(--color-white); }

    /* ACCORDION LIST */
    .jt-accordion__head:hover { opacity: 1; }

}