@font-face {
  font-family: "KMU80 Sungkok";
  src: url("../assets/fonts/KMU80Sungkok-Serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}





:root {
  --fw-body:   var(--fw-light);
  --fw-ui:     var(--fw-normal);
  --fw-strong: var(--fw-medium);
  --fw-title:  var(--fw-semibold);
}
:root {
  --v2-serif:  "KMU80 Sungkok", "Nanum Myeongjo", serif;   
  --v2-en:     "Federo", var(--font-kr);                   
  --v2-italic: "Linux Libertine", "Times New Roman", serif;          
  
  --v2-sans:   var(--font-latin);   

  
  --v2-ink: var(--ink);
}


main {
  font-weight: var(--fw-light);
  letter-spacing: 0;
}




.v2-eyebrow {
  margin: 0;
  font-family: var(--v2-en);
  font-size: clamp(16px, 1.354vw, 26px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
}


.v2-title {
  margin: 0;
  font-family: var(--v2-serif);
  font-size: clamp(26px, 2.917vw, 56px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .06em;
  text-wrap: balance;      
}


.v2-title--m  { font-size: clamp(22px, 2.083vw, 40px); }
.v2-title--s  { font-size: clamp(18px, 1.667vw, 32px); }
.v2-title--xs { font-size: clamp(17px, 1.25vw, 24px); }


.v2-subtitle {
  margin: 0;
  font-size: clamp(20px, 1.5625vw, 30px);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  text-wrap: balance;
}


.v2-subtitle--s { font-size: clamp(16px, 1.042vw, 20px); }


.v2-lead {
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: var(--fw-light);   
  line-height: 1.6;
  text-wrap: pretty;       
}


.v2-prose {
  font-size: clamp(15px, 1.146vw, 22px);
  font-weight: var(--fw-light);
  line-height: 1.7;
  word-break: keep-all;
  text-wrap: pretty;
}
.v2-prose p + p { margin-top: 1.7em; }


.v2-body {
  font-size: clamp(15px, .9375vw, 18px);
  font-weight: var(--fw-light);
  line-height: 1.7;
  word-break: keep-all;
  text-wrap: pretty;
}

.v2-lead:has(br),
.v2-prose:has(br),
.v2-body:has(br),
.home-review__text:has(br),
.lab-question__list p:has(br) { text-wrap: wrap; }


.v2-slogan {
  font-family: var(--v2-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.3;
}


.v2-btn {
  display: inline-flex;
  align-items: center;
  
  padding: clamp(9px, .604vw, 11.6px) clamp(18px, 1.25vw, 24px);
  border: 1px solid currentColor;
  font-family: var(--font-kr);
  font-size: clamp(14px, .9375vw, 18px);
  font-weight: var(--fw-normal);   
  line-height: 1.6;
  white-space: nowrap;
  background: none;     
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.v2-btn:hover { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; }


.v2-btn.reveal {
  transition-property: opacity, transform, background, color, border-color;
  transition-duration: var(--dur-slow), var(--dur-slow), var(--dur-fast), var(--dur-fast), var(--dur-fast);
  transition-timing-function: var(--ease);
  transition-delay: 0s;
}
.v2-btn.reveal[data-delay="1"] { transition-delay: .09s, .09s, 0s, 0s, 0s; }
.v2-btn.reveal[data-delay="2"] { transition-delay: .18s, .18s, 0s, 0s, 0s; }
.v2-btn.reveal[data-delay="3"] { transition-delay: .27s, .27s, 0s, 0s, 0s; }
.v2-btn.reveal[data-delay="4"] { transition-delay: .36s, .36s, 0s, 0s, 0s; }


.home-hero__bg.home-hero__bg,
.home-story__bg.home-story__bg,
.bl-hero__bg.bl-hero__bg:not(.lab-hero__video),   
.brand-name__bg.brand-name__bg {
  top: -1px;
  bottom: auto;
  height: calc(100% + 2px);
}

@media (min-width: 1201px) {
  .lab-detail__bg.lab-detail__bg { top: -1px; bottom: auto; height: calc(100% + 2px); }
}


@media (min-width: 901px) {
  .v2-stack > :first-child {
    position: sticky;
    top: 0;
    z-index: 0;
  }
  .v2-stack > :first-child + * {
    position: relative;
    z-index: 1;
    overflow: hidden;            
  }
  
  .v2-stack .v2-stack__content { transform: translate3d(0, var(--wipe, 0px), 0); }
  .v2-stack > :first-child { translate: 0 var(--lift, 0px); }   
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .v2-stack > :first-child { position: relative; }
}


.v2-mask { display: inline-block; white-space: nowrap; }
.v2-char { display: inline-block; }
.v2-line, .v2-line__in { display: block; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  
  .js .v2-stack [data-enter].reveal { opacity: 1; transform: none; transition: none; }

  
  .v2-stack .v2-mask { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
  .v2-stack .v2-line { overflow: hidden; }
  .v2-stack [data-enter] .v2-char { transform: translateY(115%) rotate(4deg); }
  
  .v2-stack [data-enter] .v2-line__in { transform: translateY(calc(105% + .3em)); }
  .v2-stack [data-enter="wipe"] { clip-path: inset(-.2em calc(100% + .3em) -.2em -.3em);    }
  .v2-stack [data-enter="media"] { clip-path: inset(100% 0 0 0); }
  .v2-stack [data-enter="media"] img { transform: scale(1.18); }

  .v2-stack .is-entered [data-enter] .v2-char,
  .v2-stack .is-entered [data-enter] .v2-line__in {
    transform: none;
    transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
  }
  .js .v2-stack .is-entered [data-enter="wipe"] {   
    clip-path: inset(-.2em -.3em -.2em -.3em);
    transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1) var(--d, 0s);
  }
  .js .v2-stack .is-entered [data-enter="media"] {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.3s cubic-bezier(.76, 0, .24, 1) var(--d, 0s);
  }
  .v2-stack .is-entered [data-enter="media"] img {
    transform: none;
    transition: transform 1.8s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
  }
}