/*
 * Main-page typography scale test.
 * Reversible experiment: remove this file link from index.html/mobile.html to restore.
 */

:root {
  --cg-test-display-xl: clamp(56px, 4vw, 68px);
  --cg-test-display-lg: clamp(42px, 3.15vw, 54px);
  --cg-test-display-md: clamp(34px, 2.4vw, 42px);
  --cg-test-eyebrow: 17px;
  --cg-test-body: 17px;
  --cg-test-button: 14px;
  --cg-test-card-en: 20px;
  --cg-test-card-ko: 19px;
}

.main_vis .tit01 {
  font-size: var(--cg-test-display-xl);
  line-height: 1.04;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.main_vis .main-vis-kicker {
  margin: 52px 0 0;
  color: #fff;
  font-family: var(--cg-main-korean-stack);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 2px 12px rgba(20, 16, 12, 0.42);
  word-break: keep-all;
}

.main_refi .tit00,
.main_clar .tit00,
.main_less .tit00,
.main_doctor .tit00 {
  font-size: var(--cg-test-eyebrow);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}

.main_refi .tit01,
.main_clar .tit01,
.main_less .tit01,
.main_glow .tit01 {
  font-size: var(--cg-test-display-lg);
  line-height: 1.22;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.main_note .tit01,
.main_about .tit01 {
  font-size: var(--cg-test-display-md);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 400;
}

.main_refi .txt01,
.main_clar .tit02,
.main_less .tit02,
.main_doctor .txt01,
.main_glow .tit02,
.main_about .txt01 {
  font-size: var(--cg-test-body);
  line-height: 1.82;
  font-weight: 500;
  letter-spacing: 0;
}

.more_btn,
.vis_more,
.main_note .blog_btn,
.main_about .btns li a {
  font-size: var(--cg-test-button);
  font-weight: 500;
  letter-spacing: 0;
}

.main_clar .txt01 {
  font-size: var(--cg-test-card-en);
  font-weight: 400;
  letter-spacing: 0;
}

.main_clar .txt02 {
  font-size: var(--cg-test-card-ko);
  font-weight: 500;
  letter-spacing: 0;
}

.main_doctor .tit00 .sortsmillgoudy {
  font-size: 22px;
}

.main_doctor .tit01 {
  font-size: 32px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}

.main_note .tit02,
.main_note ul li,
.main_about .loca,
.main_about .schedule li,
.main_about .sp {
  font-size: 16px;
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: 0;
}

.main_note ul li .category {
  font-size: 14px;
  font-weight: 600;
}

.main_note ul li .title {
  font-size: 18px;
  font-weight: 600;
}

.main_about .bttm .solu .subtit {
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .m_main_vis .tit01 {
    font-size: 28px !important;
    line-height: 1.18 !important;
    letter-spacing: 0.02em !important;
    font-weight: 400 !important;
  }

  .m_main_refi .tit01,
  .m_main_clar .tit01,
  .m_main_less .tit01,
  .m_main_glow .tit01,
  .m_main_note .tit01,
  .m_main_about .tit01 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04em !important;
    font-weight: 400 !important;
  }

  .m_main_clar .tit00,
  .m_main_less .tit00,
  .m_main_doctor .tit00,
  .m_main_glow .tit00 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  .m_main_refi .txt01,
  .m_main_clar .tit02,
  .m_main_less .tit02,
  .m_main_glow .tit02,
  .m_main_note .tit02,
  .m_main_about .loca,
  .m_main_about .schedule li,
  .m_main_about .sp {
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  .m_more_btn,
  .m_main_about .btns li a {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  .m_main_clar .txt01 {
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .m_main_clar .txt02 {
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  .m_main_doctor .tit01 {
    font-size: 24px !important;
    line-height: 1.48 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .m_main_note ul li {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  .m_main_note ul li .category {
    font-size: 13px !important;
    font-weight: 500 !important;
  }
}

/* ==========================================================
   Hero stagger — 한글 키커가 영어 헤드라인보다 한 박자 늦게 등장
   (.reveal 기본 delay .1s + 0.45s 오프셋 / 2026-07-06)
========================================================== */
.main_vis .main-vis-kicker.reveal,
.m_main_vis .main-vis-kicker.reveal {
  transition-delay: .55s;
}

/* ==========================================================
   Hero reveal recovery — preserve the original stagger while
   starting independently from the global scroll reveal loop.
   2026-07-12
========================================================== */
.main_vis .main-vis-kicker.reveal.fade-in,
.m_main_vis .main-vis-kicker.reveal.fade-in {
  transform: translateY(-18px);
  transition:
    opacity .9s ease-out,
    transform 1.2s cubic-bezier(.22, .61, .36, 1);
  transition-delay: .55s;
}

.main_vis .main-vis-kicker.reveal.fade-in.active,
.m_main_vis .main-vis-kicker.reveal.fade-in.active {
  transform: translateY(0);
}

.main_vis .hero-reveal-failsafe,
.m_main_vis .hero-reveal-failsafe {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .main_vis .tit01.reveal.fade-in,
  .main_vis .main-vis-kicker.reveal.fade-in,
  .m_main_vis .tit01.reveal.fade-in,
  .m_main_vis .main-vis-kicker.reveal.fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}