/* ============================================================
   페이지 섹션 스타일 (STEP 1 — 베이스만, 세부는 STEP 3에서 디테일)
   ============================================================ */

/* ---- Header / Nav (흰 배경, 라인 없음, Hero와 동일한 좌우 16px) ---- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;                    /* sticky 자식들(hero, mso 등) 위에 확실히 노출 */
  background: var(--white);
  transform: translateZ(0);         /* iOS Safari 등에서 fixed 흔들림 방지 (자체 stacking context) */
  -webkit-transform: translateZ(0);
  will-change: transform;
  /* border-bottom 제거 */
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 40px;             /* 좌우 40px — 글로벌 메뉴가 우측 끝에서 살짝 안쪽으로 */
}
@media (max-width: 767px) {
  .nav { padding: 0 20px; height: 64px; }
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.nav__logo img {
  height: 30px;                /* AbleDx 로고 락업 기준 */
  width: auto;
  display: block;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__menu a {
  font-size: var(--text-body-3);
  font-weight: var(--fw-md);
  color: var(--t-normal);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__menu a:hover { color: var(--brand); }

/* nav__toggle (햄버거) — 제거. 모바일/태블릿도 로고만 노출 */

/* ---- Section base modifiers ---- */
.section-head {
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.section-head .lead {
  font-size: var(--text-body-1);
  color: var(--t-secondary);
}
.is-dark .section-head .lead { color: var(--gray-400); }

/* ---- 1. Hero — 두 패널(영상+Fast Mover / 인트로) sticky 슬라이드 트랜지션 ---- */
.hero-section {
  position: relative;
  height: 460vh;               /* 360vh 스크롤 — 글자 fill 모션이 천천히 보이도록 확장 */
  padding: 0;
}

/* Panel 1 — 영상 + Fast Mover (초기 노출) */
.hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  padding-top: 72px;
  box-sizing: border-box;
  overflow: hidden;
  background: #0a1224;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Panel 2 — 인트로 슬라이드 패널 (아래→위 슬라이드 인 / 다크 배경 + 페이드 인 이미지) */
.hero-intro {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  margin-top: -100vh;
  padding: 72px 0 6vh;          /* 18vh → 6vh: 중앙보다 살짝만 위 */
  box-sizing: border-box;
  background: #0a1224;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transform: translateY(100%);
  will-change: transform;
}

/* 배경 이미지 (다크 + 하단 글로우) — 스크롤에 따라 0% → 100% 페이드 인 */
.hero-intro__bg {
  position: absolute;
  inset: 0;
  background: url('../images/intro_bg.jpg') center center / cover no-repeat;
  opacity: 0;                   /* JS가 0 → 1 조정 */
  pointer-events: none;
  z-index: 0;
}

.hero-intro__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  padding: 0 32px;
  box-sizing: border-box;
  text-align: center;
}

/* 인트로 타이틀 — 한 단계 작게 */
.hero-intro__title {
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);    /* 40-72 → 34-56 (한 단계 ↓) */
  font-weight: var(--fw-md);
  line-height: 1.35;
  letter-spacing: var(--ls);
}

.hero-intro__line {
  display: block;
}
.hero-intro__line .point {
  font-weight: var(--fw-bd);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* "새로운 기준" 단어 하이라이트 — 끝까지 스크롤하면 밑에 그라데이션 라인 등장 */
.hero-intro__highlight {
  position: relative;
  display: inline-block;
  --line-p: 0;                     /* JS가 0 → 1 조정 */
}
.hero-intro__highlight::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 1px;                       /* 2 → 1 더 얇게 */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 25%,
    rgba(255, 255, 255, 1) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: scaleX(var(--line-p));
  transform-origin: center;
}

/* 글자별 — JS가 split 후 .hero-intro__char 로 감싸고 알파 조정 */
.hero-intro__char {
  display: inline-block;
  color: rgba(255, 255, 255, 0.18);
  will-change: color;
}

/* "새로운 기준" 아래 그라데이션 라인 — 태블릿/모바일에서는 제거 (정렬 어색) */
@media (max-width: 1279px) {
  .hero-intro__highlight::after { display: none; }
}

@media (max-width: 767px) {
  .hero-intro { padding-top: 64px; }
  .hero-intro__inner { padding: 0 22px; }
  .hero-intro__title { font-size: clamp(22px, 6.5vw, 30px); line-height: 1.4; }
}

/* 배경 영상 */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}

/* 하단 어두운 그라데이션 — 아래서 위로 풀림 */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 18, 36, 0.92) 0%,
    rgba(10, 18, 36, 0.7) 15%,
    rgba(10, 18, 36, 0.35) 35%,
    rgba(10, 18, 36, 0) 60%
  );
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  padding: 0 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(32px, 8vh, 80px);   /* 본문↔SCROLL 간격 — viewport 짧을 때 축소 */
}

/* ============================================================
   Hero 등장 애니메이션 (페이지 로드 즉시)
   ============================================================ */

/* 거대 타이틀 — 작은 점에서 커지고 그대로 고정 (overshoot 없음) */
@keyframes heroTitlePop {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* 텍스트 — 아래에서 페이드 업 */
@keyframes heroFadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 라인 — 중앙에서 좌우로 펼침 */
@keyframes heroLineExpand {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* 상단 인트로 */
.hero__pretitle {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--fw-md);
  color: var(--white);
  letter-spacing: 0;
  opacity: 0;
  animation: heroFadeUp 0.9s var(--ease-out) 1.9s forwards;
}

/* 디바이더 — pretitle 바로 아래 그라데이션 흰 라인 */
.hero__divider {
  display: block;
  margin: -4px auto 0;
  width: 100%;
  max-width: 280px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 20%,
    rgba(255, 255, 255, 0.6) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: scaleX(0);
  transform-origin: center;
  animation: heroLineExpand 1.2s var(--ease-out) 2.3s forwards;
}

/* 거대 타이틀 "Fast Mover" — 가장 먼저, 갑자기 커짐 (살짝 느리게) */
.hero__title {
  margin: 0;
  font-weight: var(--fw-bd);
  color: var(--white);
  font-size: clamp(72px, 14vw, 200px);
  line-height: 1;
  letter-spacing: -0.04em;
  transform-origin: center;
  opacity: 0;
  animation: heroTitlePop 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

/* 하단 보조 텍스트 */
.hero__sub {
  margin: 0;
  font-size: var(--text-h5);             /* h4 → h5 한 단계 ↓ */
  font-weight: var(--fw-md);
  color: var(--gray-200);
  letter-spacing: 0;
  line-height: 1.5;
  opacity: 0;
  animation: heroFadeUp 0.9s var(--ease-out) 2.5s forwards;
}
.hero__sub strong {
  color: var(--white);
  font-weight: var(--fw-bd);
}

/* 거대 타이틀 ↔ 보조 텍스트 사이 살짝 더 간격 */
.hero__title + .hero__sub { margin-top: 16px; }

/* ---- 스크롤 큐: SCROLL 라벨 + 긴 수직 라인 (화면 끝까지) ---- */
.hero__scroll-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                   /* 라인이 화면 끝(hero 바닥)까지 닿음 */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 3;
  opacity: 0;
  animation: heroScrollFadeIn 0.9s var(--ease-out) 3.4s forwards;
}
@keyframes heroScrollFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;                    /* SCROLL ↔ 라인 좁게 (18 → 8) */
  color: var(--white);
  text-decoration: none;
  cursor: default;
}

.hero__scroll-label {
  font-size: var(--text-overline);          /* body-3 → overline 한 단계 ↓ (14 → 12) */
  font-weight: var(--fw-bd);
  letter-spacing: 0.16em;
  color: var(--white);
}

.hero__scroll-line {
  position: relative;
  width: 1px;
  height: clamp(40px, 10vh, 100px);   /* viewport 높이에 비례 — 짧은 화면에서 hero 텍스트 침범 방지 */
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%,
    rgba(255, 255, 255, 1) 100%
  );
  transform: translateY(-100%);
  animation: scrollLineFill 1.8s cubic-bezier(0.6, 0, 0.4, 1) 4.2s infinite;
}
@keyframes scrollLineFill {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* 스크롤 잠금 — body 클래스로 제어 */
body.is-scroll-locked {
  overflow: hidden;
}

/* 모션 줄임 옵션 — 접근성 */
@media (prefers-reduced-motion: reduce) {
  .hero__pretitle, .hero__title, .hero__sub, .hero__divider,
  .hero__scroll-wrap, .hero__scroll {
    animation: none;
    opacity: 1;
    transform: none;
  }
  body.is-scroll-locked { overflow: visible; }
}

/* Hero 반응형 */
@media (max-width: 767px) {
  .hero { padding-top: 64px; }
  /* margin-bottom: 80px 제거 — 모바일에선 본문이 80px 위로 밀려 중앙에서 벗어나 보임 */
  .hero__inner { padding: 0 20px; gap: 10px; margin-bottom: 0; }
  .hero__pretitle, .hero__sub { font-size: var(--text-body-1); } /* 18px on mobile */
}

/* ---- 2. Trust strip (다크) ---- */
.trust {
  padding-top: 0;
  padding-bottom: var(--section-pad);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--border-dark);
  padding-top: 48px;
}
.trust__item h4 {
  font-size: var(--text-h5);
  margin-bottom: 8px;
}
.trust__item p {
  font-size: var(--text-body-3);
  color: var(--gray-400);
}

/* ---- 3. Intro / Welcome (라이트) — 타이틀/디스크립션 2칼럼 평행 ---- */
.intro .kicker {
  font-size: var(--text-body-3);
  margin-bottom: 12px;             /* 32 → 12 좁게 */
  display: inline-flex;
}

.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;                        /* 타이틀-디스크립션 사이 8px */
  align-items: start;
}

.intro__statement {
  font-size: var(--text-h2);
  font-weight: var(--fw-bd);
  color: var(--t-strong);          /* 기본은 진한 회색 */
  margin: 0;
  line-height: 1.25;
}

/* 강조 단어 — 채도 높은 brand 컬러, 상→하 그라데이션 (하단 더 밝게) */
.intro__statement .point {
  background: linear-gradient(180deg, #1d3a85 0%, #7395d9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.intro__desc {
  display: flex;
  flex-direction: column;
  gap: 12px;                       /* 문단 사이 20 → 12 좁게 */
}
.intro__desc p {
  margin: 0;
  font-size: var(--text-body-1);   /* 18px */
  color: var(--t-normal);
  line-height: 1.6;                /* 1.7 → 1.6 살짝 좁게 */
}

@media (max-width: 1279px) {
  .intro__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---- 4. Business (사업분야) — sticky + JS 가로 스크롤 ---- */
.business-section {
  position: relative;
  height: 320vh;
  background: var(--white);
}
.business-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: clamp(60px, 8vh, 100px) 0 clamp(24px, 3vh, 40px); /* viewport 세로 비례 — 짧은 모니터에서 카드 영역 확보 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
}

.business__head {
  padding: 0 clamp(40px, 5vw, 140px) clamp(20px, 2.5vh, 40px); /* 좌우는 가로 비례, 하단은 세로 비례 — 카드 영역 확보 */
  flex-shrink: 0;
}
.business__title {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 40px);   /* 한 단계 ↓ — 텍스트 짧아져서 비중 축소 */
  font-weight: var(--fw-bd);
  color: var(--t-strong);
}

.business__cards-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.business__cards {
  display: flex;
  gap: 24px;
  padding: 0 0 0 clamp(40px, 5vw, 140px); /* head 와 동일 viewport 비례 — 우측 마진은 JS 가 처리 */
  height: 100%;
  will-change: transform;
  align-items: center;                   /* stretch → center: aspect-ratio 가 우선 적용 */
}

.biz-card {
  position: relative;
  flex-shrink: 0;
  height: 100%;                       /* 컨테이너 높이에 맞춤 — 카드 위·아래 잘림 방지 */
  max-height: 1300px;                 /* 초대형 모니터에서 너무 커지지 않게 상한 (충분히 큼) */
  width: auto;                        /* width 는 aspect-ratio 로 자동 계산 */
  aspect-ratio: 3 / 5;                /* 기본 세로 길게 (데스크탑/태블릿/모바일 통일) */
  border-radius: 20px;
  overflow: hidden;
  background: var(--gray-900);
}

/* 데스크탑·태블릿(≥768)만 — 최소 가로 폭 보장: viewport 세로가 짧아질 때 카드가 가로로 늘어남
   모바일(≤767)은 width:100% 로 컨테이너 가득 채우므로 min-width 불필요 (오히려 overflow 유발) */
@media (min-width: 768px) {
  .biz-card { min-width: clamp(320px, 24vw, 420px); }
}

/* 데스크탑/태블릿 — 4 장 카드 순차 fade-up reveal (모바일 ≤767 은 [data-reveal-stack] 헤더 reveal 만으로 충분) */
@media (min-width: 768px) {
  .business__cards .biz-card {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);
    will-change: opacity, transform;
  }
  .business__cards.is-revealed .biz-card { opacity: 1; transform: translateY(0); }
  .business__cards.is-revealed .biz-card:nth-child(1) { transition-delay: 0ms; }
  .business__cards.is-revealed .biz-card:nth-child(2) { transition-delay: 200ms; }
  .business__cards.is-revealed .biz-card:nth-child(3) { transition-delay: 400ms; }
  .business__cards.is-revealed .biz-card:nth-child(4) { transition-delay: 600ms; }
}

/* 상단 어두운 그라데이션 — 텍스트 가독성 (위가 가장 어둡다가 50% 지점에서 완전 투명) */
.biz-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.75) 25%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0) 75%
  );
  pointer-events: none;
  z-index: 1;
}

/* 이미지 컨테이너 (호버 시 이미지만 확대) */
.biz-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.biz-card__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.biz-card:hover .biz-card__bg {
  transform: scale(1.2);
}

.biz-card__text {
  position: relative;
  z-index: 2;
  padding: 32px 32px;
  color: var(--white);
}
.biz-card__title {
  margin: 0 0 4px;
  font-size: var(--text-h4);                /* h3 → h4 한 단계 ↓ */
  font-weight: var(--fw-bd);
  color: var(--white);
  letter-spacing: var(--ls);
}
.biz-card__en {
  margin: 0 0 28px;
  font-size: var(--text-body-1);            /* h5 → body-1 한 단계 ↓ (20 → 18) */
  font-weight: var(--fw-md);
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0;
}
.biz-card__desc {
  margin: 0;
  font-size: var(--text-body-2);          /* 16px — 데스크탑 / 태블릿 (모바일도 16, 소형은 14) */
  font-weight: var(--fw-md);              /* Medium */
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

/* 태블릿/모바일 공통 — 본문 줄바꿈 금지 (태블릿은 가로 스크롤 유지) */
@media (max-width: 1279px) {
  .biz-card { width: clamp(320px, 40vw, 420px); aspect-ratio: 4 / 5; }
  .biz-card__title { font-size: var(--text-h4); }
  .biz-card__en { font-size: var(--text-body-3); margin-bottom: 16px; }   /* body-2 → body-3 한 단계 ↓ */
  .biz-card__desc { font-size: var(--text-body-3); white-space: nowrap; }
}

/* 태블릿 — 타이틀 하단으로 + 카드와 가깝게 + 카드 세로 살짝 더 길게 */
@media (min-width: 768px) and (max-width: 1279px) {
  .business-sticky { padding-top: 100px; }              /* 160 → 100 타이틀 살짝 ↑ */
  .business__head { padding-bottom: 64px; }             /* 16 → 64 타이틀과 카드 사이 간격 확보 */
  .biz-card { aspect-ratio: 3 / 4; }                    /* 4/5(1.25) → 3/4(1.33) 살짝 세로 */
  .business-section { margin-bottom: 80px; }            /* 사업분야 → R&D 사이 간격 확보 */

}

@media (max-width: 767px) {
  /* 모바일 — sticky 가로 스크롤 해제, 4 카드 세로 stack, 좌우 균등 */
  .business-section { height: auto; }
  .business-sticky {
    position: static;
    height: auto;
    padding: 60px 22px 80px;            /* 좌우 패딩을 sticky 로 통일 — 카드 정확히 중앙 */
    overflow: visible;
    display: block;
    box-sizing: border-box;
  }
  .business__head { padding: 0 0 32px; }
  .business__cards-wrap { overflow: visible; }
  .business__cards {
    flex-direction: column;
    padding: 0;
    gap: 16px;
    height: auto;
    transform: none !important;        /* JS의 translateX 무력화 */
    align-items: stretch;
  }
  .biz-card { width: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; }    /* 모바일/소형 모바일 — 정사각형 */
  .biz-card__text { padding: 24px 22px; }
}

/* ---- 5. R&D Platform — 풀폭 sticky (스크롤 잠긴 상태에서 step opacity 차례로 reveal) ---- */
.rnd-section {
  position: relative;
  background: var(--white);
  padding: 0;
}

/* sticky 동작 범위 (이 안에서 sticky 가 100vh pinned) — 350vh: 100vh sticky + 250vh pin scroll
   타임라인 1→2→3 채우기 완료까지 sticky 해제되지 않도록 충분한 스크롤 확보 */
.rnd__sticky-area {
  position: relative;
  height: 350vh;
}

.rnd__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: clamp(60px, 9vh, 100px);    /* viewport 높이 따라 가변 — 좁은 높이에서 step 3 잘림 방지 */
  padding-bottom: clamp(20px, 3vh, 40px);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;        /* 상단정렬 — 타이틀 안 잘리게 */
  overflow: hidden;
}

.rnd__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 5fr 7fr;  /* 이미지 살짝 작게 */
  gap: 80px;
  align-items: start;              /* 이미지 - 컨텐츠 상단정렬 */
}

/* 좌측: 이미지 — 좌측 viewport 끝까지 (좌측 패딩 0) */
/* 가로값은 100% 유지, 세로값을 늘림 (5:6 portrait) */
.rnd__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  padding-left: 0;
  overflow: hidden;
}
.rnd__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;            /* 상단 보존, 잘림은 하단으로 (그라데이션이 가려줌) */
}
/* 이미지 하단 흰색 그라데이션 — 배경과 자연스럽게 이어지게 */
.rnd__visual::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 70%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
}

/* 우측: 컨텐츠 — 우측에 패딩 (텍스트가 viewport 끝에 안 닿게) */
.rnd__content {
  display: flex;
  flex-direction: column;
  padding-right: var(--container-pad);
  padding-top: 48px;               /* 콘텐츠 살짝만 내림 */
}

.rnd__title {
  margin: 0 0 clamp(16px, 2.5vh, 24px);   /* viewport 높이 따라 가변 */
  font-size: clamp(32px, 4.5vw, 48px);    /* 한 단계 ↑ (h2 → h1) */
  font-weight: var(--fw-bd);
  color: var(--t-strong);
  line-height: 1.3;
  letter-spacing: var(--ls);
}

.rnd__desc {
  margin: 0 0 clamp(32px, 6vh, 72px);   /* viewport 높이 따라 가변 — 좁은 높이에서 압축 */
  font-size: var(--text-h5);       /* body-1 → h5 한 단계 ↑ (20px) */
  color: var(--gray-700);          /* 라이트 섹션 본문 통일 (tech__desc 와 동일) */
  line-height: 1.5;
}
.rnd__desc strong {
  color: var(--gray-700);
  font-weight: var(--fw-md);              /* Bold → Medium (섹션 본문 강조도 미디움 통일) */
}

/* 3 스텝 — 가로 타임라인 트랙 + step 순차 reveal (웹/모바일/태블릿 동일 디자인) */
.rnd__steps {
  position: relative;                  /* 트랙 absolute 기준 */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 24px 0 0;                   /* num 상단 여백 */
}

/* 가로 타임라인 트랙 — JS 가 첫/마지막 num center 기준으로 top/left/width 설정 */
.rnd__steps-track {
  position: absolute;
  height: 1px;                         /* MSO 타임라인 트랙과 동일한 두께 */
  background: var(--border);
  z-index: 0;
  pointer-events: none;
}
.rnd__steps-progress {
  display: block;
  height: 100%;
  width: 0%;                           /* JS 가 0 → 100% 채움 */
  background-image: linear-gradient(to right, var(--gray-400) 0%, var(--gray-600) 50%, var(--gray-900) 100%);
  background-size: var(--track-w, 100%) 100%;   /* 트랙 전체 폭 기준 — JS 가 track 폭을 --track-w 에 주입 */
  background-position: left center;
  background-repeat: no-repeat;
  transition: width 180ms linear;
}

.rnd__step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;                 /* 컬럼 내부 가운데정렬 */
  padding: 0;
}
/* 미도달 (default) — num 옅은 회색 배경, 텍스트 옅은 회색 (트랙 위 겹쳐도 가독성 ↓ 효과) */
.rnd__step .rnd__step-num {
  background: var(--gray-300);
  transition: background-color 500ms var(--ease-out);
}
.rnd__step .rnd__step-en,
.rnd__step .rnd__step-ko,
.rnd__step .rnd__step-desc {
  color: var(--gray-300);
  transition: color 500ms var(--ease-out);
}
/* 도달 — 단계별 다른 그레이 농도 (임상 < 연구 < 상용화 순으로 진해짐)
   주의: .rnd__steps 의 첫 자식이 <span class="rnd__steps-track"> 이므로 :nth-child 가 아닌
   :nth-of-type 으로 <li> 만 카운트해야 step 1·2·3 이 정확히 매칭됨 */
/* Step 1 (임상) — gray-400 */
.rnd__step:nth-of-type(1).is-reached .rnd__step-num { background: var(--gray-400); }
.rnd__step:nth-of-type(1).is-reached .rnd__step-en,
.rnd__step:nth-of-type(1).is-reached .rnd__step-ko { color: var(--gray-400); }

/* Step 2 (연구) — gray-500 */
.rnd__step:nth-of-type(2).is-reached .rnd__step-num { background: var(--gray-500); }
.rnd__step:nth-of-type(2).is-reached .rnd__step-en,
.rnd__step:nth-of-type(2).is-reached .rnd__step-ko { color: var(--gray-500); }

/* Step 3 (상용화) — gray-800 */
.rnd__step:nth-of-type(3).is-reached .rnd__step-num { background: var(--gray-800); }
.rnd__step:nth-of-type(3).is-reached .rnd__step-en,
.rnd__step:nth-of-type(3).is-reached .rnd__step-ko { color: var(--gray-800); }

/* 모바일/태블릿/데스크탑 — 동일 디자인 (트랙 + 원형 num + 1→2→3 reveal) */

.rnd__step-head {
  display: flex;
  flex-direction: column;              /* num 위, label 아래 */
  align-items: center;
  gap: 28px;
  margin-bottom: 0;
}

.rnd__step-num {
  position: relative;              /* 트랙 위로 z-index 2 */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;                     /* 28 */
  height: 28px;
  border-radius: 50%;              /* 원형 — 모든 breakpoint 동일 */
  background: var(--gray-900);
  color: var(--white);
  font-size: 16px;                 /* 폰트 16 */
  font-weight: var(--fw-md);       /* Medium */
  flex-shrink: 0;
}

.rnd__step-label {
  display: flex;
  flex-direction: column;          /* 한글 위, 영문 아래 */
  align-items: center;
  gap: 8px;
  letter-spacing: 0;
}
/* 한글 — 큰 사이즈, 볼드, 위에 배치 (DOM 순서는 영문 → 바 → 한글 이므로 order 로 위로) */
.rnd__step-ko {
  order: -1;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--fw-bd);
  color: var(--t-strong);
  letter-spacing: var(--ls);
  line-height: 1;
}
/* 영문 — 작은 사이즈, 미디움, 아래 배치 */
.rnd__step-en {
  font-size: var(--text-body-1);   /* 18px */
  font-weight: var(--fw-md);
  color: var(--t-strong);
  letter-spacing: 0.04em;
  line-height: 1;
}
/* 바 ( | ) 와 작은 본문 — 가로 레이아웃에서 제거 */
.rnd__step-bar { display: none; }
.rnd__step-desc { display: none; }

/* 데스크탑 — step 좌측정렬 (step 전체가 본문 left edge 에서 시작), 자연 폭 + 명시적 gap.
   내부는 center 정렬 유지 → num·한글·영문 중앙선이 일치하여 시각적으로 정확히 정렬됨 */
@media (min-width: 1280px) {
  .rnd__steps {
    justify-content: flex-start;
    gap: clamp(80px, 9vw, 160px);
  }
  .rnd__step { flex: 0 0 auto; }
}

/* ---- 5-2. R&D 제품 카테고리 카드 (grey-50 컨테이너 3개) ---- */
.rnd__products {
  padding: 80px var(--container-pad) 128px;
}
.rnd__products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.rnd__product-card {
  background: var(--gray-50);      /* #f9fafb */
  border-radius: 20px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  transition: background-color 400ms var(--ease-out);
}
/* 호버 시: 카드 배경 → gray-900 다크, 텍스트는 밝은 톤으로 (단, 전부 흰색은 아님) */
.rnd__product-card:hover {
  background: var(--gray-900);     /* #191f28 */
}
/* 호버 시 타이틀 한 단계 ↑ — transform으로 카드 높이 변경 없이 시각적으로만 확대 */
.rnd__product-title {
  transform-origin: left center;
  transition: transform 400ms var(--ease-out);
}
.rnd__product-card:hover .rnd__product-title {
  transform: scale(1.15);          /* 시각적으로 한 단계 ↑ (font-size 안 바꿔서 reflow 없음) */
}
.rnd__product-title {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--text-h3);       /* h4 → h3 한 단계 ↑ */
  line-height: 1.3;
  color: var(--t-strong);          /* 뉴트럴 */
}
.rnd__product-en {
  font-weight: var(--fw-md);       /* 영어 미디움 */
  letter-spacing: 0;
  color: var(--t-strong);
  transition: color 400ms var(--ease-out);
}
.rnd__product-ko {
  font-weight: var(--fw-bd);
  letter-spacing: var(--ls);
  color: var(--t-strong);          /* 뉴트럴 */
  transition: color 400ms var(--ease-out);
}
/* 호버 시 타이틀 — 한글/영어 모두 화이트 */
.rnd__product-card:hover .rnd__product-ko { color: var(--white); }
.rnd__product-card:hover .rnd__product-en { color: var(--white); }

.rnd__product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rnd__product-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-body-2);   /* 16px */
  color: var(--gray-800);
  line-height: 1.5;
  transition: color 400ms var(--ease-out);
}
/* 호버 시 리스트 텍스트 — gray-300 (다크 배경에서 가독성 ↑, 흰색 아님) */
.rnd__product-card:hover .rnd__product-list li { color: var(--gray-300); }

/* 체크 아이콘 — 뉴트럴 */
.rnd__product-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gray-500);          /* #8b95a1 */
  margin-top: 3px;                 /* baseline 정렬 보정 */
  transition: color 400ms var(--ease-out);
}
/* 호버 시 체크 — 브랜드 라이트로 포인트 */
.rnd__product-card:hover .rnd__product-check { color: var(--brand-light); }
/* "예정" 뱃지 — 인라인 라이트블루 pill (위아래 패딩 충분히) */
.rnd__product-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;               /* 2 → 6 위아래 패딩 충분히 */
  margin-left: 8px;
  background: #e8efff;
  color: var(--brand);             /* #293f74 */
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--fw-md);       /* 미디움 */
  letter-spacing: 0;
  line-height: 1;
  vertical-align: middle;
}

@media (max-width: 1279px) {
  /* 본문 — explicit <br /> 에서만 줄바꿈 (자연 wrap 방지) */
  .rnd__desc { white-space: nowrap; }
  /* 모바일/태블릿은 sticky 해제 + 좌측 분할 이미지 미사용 */
  .rnd-section { padding: 0; }
  .rnd__sticky-area { height: auto; padding: 40px 0 0; }     /* 80 → 40 상단 패딩 축소 */
  .rnd__sticky {
    position: static; height: auto; overflow: visible; display: block;
    padding: 0;                                              /* 데스크탑 padding-top: 100px 해제 */
  }
  .rnd__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rnd__visual { display: none; }
  .rnd__content { padding: 0 22px; }
  .rnd__desc { margin-bottom: 36px; }                        /* 72 → 36 본문↔스텝 간격 축소 */
  .rnd__step::after { right: -22px; }

  .rnd__products { padding: 40px 22px 80px; }
  /* 3 카드 동일 높이 — Pain Care/Beauty 자연 높이에 맞춰 Immune 도 같은 높이로 */
  .rnd__products-grid { grid-template-columns: 1fr; gap: 16px; }
  .rnd__product-card { padding: 32px 28px; min-height: 220px; }
}

/* 태블릿만 — R&D 본문은 자연 wrap 허용 + 폰트 축소로 (br)에서만 한 번 줄바꿈해 2줄 */
@media (min-width: 768px) and (max-width: 1279px) {
  .rnd__desc {
    white-space: normal;
    font-size: var(--text-body-1);
  }
}

/* ---- 6. MSO / 라플라스 (다크 + 우측 글래스 배경 + sticky pin + 스크롤 따라 날짜 확대) ---- */
.mso-section {
  position: relative;
  background: var(--gray-900);
  padding: 0;
}

/* sticky 동작 범위 — sticky 자식이 auto 높이라 viewport 안에서 핀 + 하단으로 support 자연 등장 */
.mso__sticky-area {
  position: relative;
  height: 160vh;                              /* pin 구간 단축 — 카드 reveal 이후 support 가 viewport 하단으로 자연 진입 */
}

.mso__sticky {
  position: sticky;
  top: 0;
  height: auto;                               /* 콘텐츠 높이만 — 빈 공간 제거 */
  padding: 160px var(--container-pad) 60px;  /* 전체 콘텐츠 살짝 ↓ (100 → 160) */
  box-sizing: border-box;
  background: var(--gray-900);
}

/* 우측 글래스/크리스탈 배경 이미지 — top: 0 부터 노출되어 위 잘림 없이 전체 보이게 */
.mso__bg {
  position: absolute;
  top: 0;                                     /* 12vh → 0 위쪽 여백 제거 */
  right: 0;
  width: 38%;
  height: 100vh;                              /* 72 → 100vh 다시 전체 viewport */
  z-index: 0;
  pointer-events: none;
}
.mso__bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right top;                /* 우측 상단 정렬 — 위 여백 제거 */
  display: block;
}
/* 좌측에서 다크 → 투명으로 페이드 — 페이드 영역 축소로 이미지 더 많이 노출 */
.mso__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--gray-900) 0%,
    rgba(25, 31, 40, 0.45) 18%,
    rgba(25, 31, 40, 0.05) 45%,
    rgba(25, 31, 40, 0) 100%
  );
}

.mso__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.mso__head {
  max-width: 960px;                          /* 타이틀 한 줄로 들어가게 폭 ↑ */
  margin: 0 auto 48px;                       /* 가운데 정렬 */
  text-align: center;
}
/* 상단 pretitle — 한 단계 축소 (h3 → h4) */
.mso__pretitle {
  margin: 0 0 8px;
  font-size: var(--text-h4);
  font-weight: var(--fw-md);
  color: var(--gray-300);                    /* white → gray-300 (#d1d6db) */
  letter-spacing: 0;
}
.mso__title {
  margin: 0 0 20px;
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: var(--fw-bd);
  line-height: 1.3;
  letter-spacing: var(--ls);
  color: var(--white);
}
/* "라플라스" 단어 밑에만 라인 — 양옆 대칭 페이드 */
.mso__title-accent {
  position: relative;
  display: inline-block;
}
.mso__title-accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 20%,
    rgba(255, 255, 255, 0.6) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}
.mso__desc {
  margin: 0;
  font-size: var(--text-h5);
  color: var(--gray-200);
  line-height: 1.5;
  font-weight: var(--fw-md);
}
/* 본문 중 "라플라스(Laplace)" 강조 — 컬러·weight 모두 본문과 동일 */
.mso__desc-accent {
  font-weight: var(--fw-md);
  color: var(--gray-200);
}

/* 카드 영역 — 세로 stack, 가운데 정렬 */
.mso__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 740px;                          /* 카드 가로 740 */
  margin: 0 auto;
}
.mso-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;                                 /* 로고 ↔ 인포 사이 간격 축소 (64 → 32) */
  padding: 44px 40px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* 초기 상태: 보이지 않음. 스크롤 진행도가 임계점을 넘으면 .is-revealed 부여 → 부드럽게 등장 */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.mso-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.mso-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mso-card__logo img {
  width: 240px;                              /* 로고 크기 (216 → 240) */
  height: auto;
  display: block;
}
.mso-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mso-card__label {
  margin: 0;
  font-size: var(--text-body-2);
  color: var(--gray-300);
  font-weight: var(--fw-md);
}
/* 날짜와 뱃지 — 가로 정렬, 가깝게, 정확한 baseline 일치 */
.mso-card__date-row {
  display: flex;
  align-items: baseline;                     /* baseline 정렬 — 폰트 크기 변해도 underline 일치 */
  gap: 14px;
}
.mso-card__date {
  font-size: 40px;                           /* 기본 40px, 호버 시 48px */
  font-weight: var(--fw-bd);
  color: var(--white);
  letter-spacing: var(--ls);
  line-height: 1;
  display: inline-block;
  transform-origin: left center;
  transition: font-size 300ms var(--ease-out);
}
.mso-card:hover .mso-card__date {
  font-size: 48px;                           /* 호버 시 한 단계 ↑ */
}
/* 개원 / 개원 예정 pill 뱃지 */
.mso-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 16px 24px;                         /* 상하 패딩 ↑ (12 → 16) */
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-radius: 999px;
  font-size: var(--text-h5);
  font-weight: var(--fw-md);
  white-space: nowrap;
  letter-spacing: var(--ls);
  line-height: 1;
  position: relative;
  top: -10px;                                 /* baseline 정렬 보정 ↑ (-2 → -10) — 날짜와 시각 중심 일치 */
}

/* ---- 6-2. MSO 지원 영역 — 3컬럼 (번호 + 디바이더 + 타이틀 + 설명) ---- */
.mso__support {
  position: relative;
  padding: 80px var(--container-pad) 100px;   /* 상단 살짝 ↓ (0 → 80) */
  background: var(--gray-900);
}
.mso__support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.mso-support-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.mso-support-item__num {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--fw-md);
  color: var(--white);
  letter-spacing: 0;
  line-height: 1;
}
/* 번호 아래 가로 디바이더 — 양옆 페이드 그라데이션 (라플라스 underline 과 동일 톤) */
.mso-support-item__divider {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 20%,
    rgba(255, 255, 255, 0.35) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}
.mso-support-item__title {
  margin: 0;
  font-size: var(--text-h3);                 /* h2 → h3 한 단계 ↓ */
  font-weight: var(--fw-bd);
  color: var(--white);
  line-height: 1.3;
}
.mso-support-item__desc {
  margin: 0;
  font-size: var(--text-body-2);             /* body-1 → body-2 — 3줄 안에 들어오게 */
  color: var(--gray-300);
  font-weight: var(--fw-md);
  line-height: 1.6;
}

@media (max-width: 1279px) {
  .mso__support { padding: 60px 22px 80px; }
  .mso__support-grid { grid-template-columns: 1fr; gap: 56px; }
  .mso-support-item__divider { max-width: 240px; }
}

/* ---- 6-3. MSO 로드맵 — sticky pin (라인 100% 채워질 때까지 다음 섹션 차단) ---- */
.mso__roadmap-area {
  position: relative;
  height: 200vh;                               /* pin range: 100vh sticky + 100vh of pin scroll */
  background: var(--gray-900);
  margin-top: -1px;                            /* 위 .mso__support 와 sub-pixel 갭 차단 (옅은 가로 라인 방지) */
}
/* mso section 끝에 흰색 spacer — 데스크탑/태블릿/모바일 공통, 그라데이션 마지막 픽셀 sub-pixel 오차로 dark 가 비치는 문제 차단 */
.mso__roadmap-area::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--white);
  z-index: 10;
  pointer-events: none;
}
.mso__roadmap {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--gray-900);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;                     /* 타임라인을 viewport 세로 가운데 정렬 */
}
/* 좌측 하단 구체 이미지 — 좌측 절반만 노출, 타임라인 영역과 겹치지 않게 */
.mso__roadmap-sphere {
  position: absolute;
  left: -240px;
  bottom: -180px;                              /* -120 → -180 아주 살짝 ↓ */
  width: 820px;
  max-width: 46vw;
  pointer-events: none;
  z-index: 0;
}
.mso__roadmap-sphere img {
  width: 100%;
  height: auto;
  display: block;
}
/* 하단 → 다음 섹션으로 white 그라데이션 페이드 (배경 + 이미지 위로 덮어) */
.mso__roadmap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 380px;
  background: linear-gradient(
    to bottom,
    rgba(25, 31, 40, 0) 0%,
    rgba(25, 31, 40, 0) 30%,
    rgba(255, 255, 255, 0.4) 75%,
    var(--white) 100%
  );
  pointer-events: none;
  z-index: 3;
}
/* 트랙: 섹션 전체 높이 (top:0 → bottom:0), viewport 정중앙 — 상단 mask 페이드인 */
/* z-index 4 — white 그라데이션 오버레이(::after, z-index 3) 위로 라인이 보이게 */
.mso-timeline__track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;                                   /* 섹션 끝까지 — 흰색 그라데이션 영역까지 라인 이어짐 */
  width: 1px;
  margin-left: -0.5px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 4;                                  /* white 오버레이 위에 노출 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 180px, black 100%);
          mask-image: linear-gradient(to bottom, transparent 0, black 180px, black 100%);
}
.mso-timeline__progress {
  display: block;
  width: 100%;
  height: 0%;                                  /* JS 가 0 → 100% 로 채움 */
  background: rgba(255, 255, 255, 0.9);
  transition: height 120ms linear;
}
/* 타임라인 wrapper — 리스트를 정중앙에서 우측으로 펼침 */
.mso__roadmap-timeline {
  position: relative;
  z-index: 2;
  padding: 40px 0;
}
.mso-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 360px;
  margin-left: 50%;                            /* 리스트 좌측 = viewport 중앙 */
  transform: translateX(-1px);                 /* 1px 라인 우측 가장자리에 정렬 */
  display: flex;
  flex-direction: column;
  gap: 80px;                                   /* 카드 컨테이너끼리 간격 */
  position: relative;
  z-index: 2;
}
.mso-timeline__item {
  position: relative;
  padding-left: 32px;                          /* dot ↔ 카드 간격 */
  /* 기본: 살짝 아래에서 + 투명, 라인이 dot 에 닿으면 .is-reached 로 떠오름 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.mso-timeline__item.is-reached {
  opacity: 1;
  transform: translateY(0);
}
/* dot — 트랙과 동일 x (viewport 중앙). 12px 원 */
.mso-timeline__dot {
  position: absolute;
  left: -6px;                                  /* dot center = 0 = 리스트 left = viewport center */
  top: 50%;
  margin-top: -6px;                            /* dot center 를 카드 중앙에 정렬 */
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10);
  z-index: 3;
}
/* 콘텐츠 컨테이너 — white 4% 카드 */
.mso-timeline__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 40px 56px;
  text-align: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mso-timeline__year {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--fw-bd);
  color: var(--white);
  line-height: 1;
  letter-spacing: var(--ls);
}
.mso-timeline__label {
  margin: 0;
  font-size: var(--text-body-2);
  color: var(--gray-300);
  font-weight: var(--fw-md);
  line-height: 1.4;
}

@media (max-width: 1279px) {
  /* 모바일/태블릿 — sticky 해제 + [트랙+점+카드] 그룹으로 중앙 정렬 */
  .mso__roadmap-area { height: auto; position: relative; }
  .mso__roadmap {
    position: static;
    height: auto;
    padding: 60px 0 160px;
    overflow: hidden;
    isolation: isolate;
    display: block;
  }
  .mso__roadmap-sphere { display: none; }
  .mso__roadmap-timeline {
    position: static;
    padding: 0;
  }
  /* 그룹 총 폭 = 트랙 0 + 점→카드 gap 32 + 카드 320 = 352, viewport 중앙 정렬 */
  /* 트랙: 그룹 좌측(=50vw - 176)에 위치, 작은 viewport 에선 8px 로 클램프 */
  .mso-timeline__track {
    left: max(8px, calc(50% - 176px));
    margin-left: -0.5px;
    right: auto;
  }
  /* 리스트 — 카드 320px, 그룹 내 위치(트랙+32 = 50vw - 144) */
  .mso-timeline__list {
    width: 320px;
    max-width: calc(100% - 80px);
    margin-left: max(40px, calc(50% - 144px));
    margin-right: 0;
    padding: 0;
    gap: 80px;
    transform: none;
  }
  .mso-timeline__item { padding-left: 0; }
  /* 점 — item.left - 32 = 트랙과 동일 X. dot.left = -32 - 6 = -38 */
  .mso-timeline__dot { left: -38px; }
  .mso__roadmap::after { height: 240px; }
}

@media (max-width: 1279px) {
  .mso__sticky-area { height: auto; padding: 80px 0; }
  .mso__sticky {
    position: static;
    height: auto;
    padding: 0 22px;
    overflow: visible;
    display: block;
  }
  .mso__bg { width: 100%; opacity: 0.35; }
  .mso__bg::after {
    background: linear-gradient(to bottom, var(--dark) 0%, rgba(25,31,40,0.5) 100%);
  }
  .mso__head { margin-bottom: 40px; }
  /* 카드 컨테이너 — 380px 고정, 화면 폭과 무관 */
  .mso__cards { max-width: 380px; margin: 0 auto; }
  .mso-card {
    flex-direction: column;                          /* 모바일: 로고 위 + 인포 아래 세로 stack */
    gap: 20px;
    padding: 24px;
  }
  /* 인포 — 라벨, 날짜+뱃지 모두 카드 가운데 정렬 */
  .mso-card__info { align-items: center; text-align: center; }
  .mso-card__date-row { justify-content: center; }
  .mso-card__badge { padding: 8px 16px; top: 0; }
  .mso-card__date { font-size: 32px; }
  /* 모바일은 sticky 해제 — 카드 항상 표시 */
  .mso-card { opacity: 1; transform: none; }
}

/* ---- 7. 차별화된 핵심 기술력 (라이트, 3개 row alternating, scroll reveal) ---- */
.tech-section {
  background: var(--white);
  padding: 160px var(--container-pad) 200px;  /* RND products 와 동일한 좌우 마진 */
  overflow-x: clip;
  overflow-y: visible;
}
.tech__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.tech__head {
  max-width: 960px;
  margin-bottom: 120px;
}
.tech__title {
  margin: 0 0 20px;                          /* desc 와의 간격 — mso/global 과 동일 */
  font-size: clamp(32px, 4.5vw, 48px);       /* 라플라스 영역과 동일 사이즈 */
  font-weight: var(--fw-bd);
  line-height: 1.3;
  letter-spacing: var(--ls);
  color: var(--t-strong);
}
.tech__desc {
  margin: 0;
  font-size: var(--text-h5);                 /* mso/global desc 와 동일 사이즈 (20px) */
  color: var(--gray-700);                    /* 라이트 배경 톤 */
  font-weight: var(--fw-md);
  line-height: 1.5;
}

.tech__items {
  display: flex;
  flex-direction: column;
  gap: 100px;                                /* 160 → 100 row 사이 간격 좁게 */
}
.tech-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* 콘텐츠 — 스크롤 진입 시 살짝 아래에서 위로 떠오르며 등장 (좀 더 부드럽게) */
.tech-item__content {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);
}
.tech-item__num {
  margin: 0 0 8px;                           /* 16 → 8 타이틀과 간격 좁게 */
  font-size: var(--text-h4);                 /* h3 → h4 한 단계 ↓ */
  font-weight: var(--fw-md);
  color: var(--t-strong);
  line-height: 1;
}
.tech-item__title {
  margin: 0 0 2px;
  font-size: var(--text-h3);
  font-weight: var(--fw-bd);
  color: var(--t-strong);
  line-height: 1.35;
}
.tech-item__en {
  margin: 0 0 24px;                          /* 32 → 24 본문과 간격 아주 살짝 ↓ */
  font-size: var(--text-body-1);
  font-weight: var(--fw-md);
  color: var(--gray-600);
}
.tech-item__desc {
  margin: 0;
  font-size: var(--text-body-2);
  color: var(--gray-700);
  font-weight: var(--fw-md);
  line-height: 1.7;
}

/* 이미지 — 좌/우에서 슬라이드인 + fade in (좀 더 부드럽게) */
.tech-item__visual {
  opacity: 0;
  overflow: hidden;
  border-radius: 24px;
  transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out);
}
.tech-item__visual[data-slide="right"] {
  transform: translateX(120px);              /* 오른쪽에서 슬라이드 — 초기 위치 우측 */
}
.tech-item__visual[data-slide="left"] {
  transform: translateX(-120px);             /* 왼쪽에서 슬라이드 */
}
.tech-item__visual img {
  width: 100%;
  height: auto;
  display: block;
}
/* reveal 상태 */
.tech-item.is-revealed .tech-item__content {
  opacity: 1;
  transform: translateY(0);                   /* 콘텐츠 위로 떠오름 */
}
.tech-item.is-revealed .tech-item__visual {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 1279px) {
  .tech-section { padding: 80px 0 100px; }
  .tech__inner { padding: 0 22px; }
  .tech__head { margin-bottom: 60px; }
  .tech__items { gap: 80px; }
  .tech-item {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* 모바일은 텍스트 위 / 이미지 아래 순서 통일 */
  .tech-item__content { order: 1; }
  .tech-item__visual { order: 2; }
  /* 모바일 슬라이드 거리 축소 */
  .tech-item__visual[data-slide="right"] { transform: translateX(40px); }
  .tech-item__visual[data-slide="left"]  { transform: translateX(-40px); }
  /* 본문 — 한글 어절 단위로만 줄바꿈 (구절 내부 끊김 방지) */
  .tech-item__desc { word-break: keep-all; }
  .tech-item__desc br { display: none; }
}

/* ---- 8. Growth / Financial (라이트 — white + 카운터 모션) ---- */
.growth-section {
  background: var(--white);
  padding: 40px var(--container-pad) 160px;  /* 상단 160 → 40 위 섹션과 간격 축소 */
  color: var(--t-normal);
}
.growth__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.growth__head { margin-bottom: 24px; }
/* tech__pretitle 와 동일 스펙 — 사이즈 h4, medium, margin-bottom 8px */
.growth__kicker {
  margin: 0 0 8px;
  font-size: var(--text-h4);
  font-weight: var(--fw-md);
  color: var(--gray-300);                    /* gray-400 → gray-300 (#d1d6db) */
  letter-spacing: 0;
  text-transform: none;
}
.growth__title {
  margin: 0;
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: var(--fw-bd);
  line-height: 1.3;
  letter-spacing: var(--ls);
  color: var(--t-strong);                    /* 다크 → 라이트 배경: white → t-strong (#191f28) */
}

/* 메트릭 패널 — 4 지표 가로, 컨테이너 없음 + 사이 얇은 세로 라인 */
.growth__metrics-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 24px 0;
}
.growth-metric {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 40px;
}
.growth-metric + .growth-metric {
  border-left: 1px solid var(--border);              /* 얇게 (2 → 1) */
}
.growth-metric:first-child { padding-left: 0; }
.growth-metric:last-child  { padding-right: 0; }
.growth-metric__label {
  margin: 0;
  font-size: var(--text-body-1);
  color: var(--gray-600);                    /* 라이트 배경: gray-300 → gray-600 */
  font-weight: var(--fw-md);
}
.growth-metric__value {
  margin: 0;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: var(--fw-bd);
  color: var(--t-strong);                    /* white → t-strong (#191f28) */
  line-height: 1;
  letter-spacing: var(--ls);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.growth-metric__unit-inline {
  font-size: inherit;
  font-weight: inherit;
}
.growth-metric__unit {
  font-size: var(--text-h4);                 /* body-1(18) → h4(24) 더 크게 */
  font-weight: var(--fw-bd);                 /* medium → bold 굵게 */
  color: var(--t-strong);                    /* gray-600 → t-strong 살짝 더 진하게 */
}

/* 차트 — standalone (투명 배경 X) */
.growth__chart {
  padding: 24px 0 0;
}
.growth-chart__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.growth-chart__caption {
  margin: 0;
  font-size: var(--text-body-1);
  color: var(--gray-300);
  font-weight: var(--fw-md);
}
.growth-chart__annotation { text-align: right; }
.growth-chart__annotation-label {
  margin: 0 0 4px;
  font-size: var(--text-caption);
  color: var(--gray-400);
  font-weight: var(--fw-md);
}
.growth-chart__annotation-value {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--fw-bd);
  color: var(--white);
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
}

/* 차트 body — viewBox(800×300) 비율 유지 → 원이 찌그러지지 않음 */
.growth-chart__body {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 300;
  max-height: 360px;
}
.growth-chart__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.growth-chart__grid line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.growth-chart__area {
  opacity: 0;
  transition: opacity 1200ms var(--ease-out) 400ms;
}
.growth-chart__line {
  /* JS 가 pathLength 측정 후 dasharray/dashoffset 세팅 */
  transition: stroke-dashoffset 1800ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.growth-chart__dots circle {
  fill: var(--brand-light);
  stroke: var(--gray-900);
  stroke-width: 3;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.growth-chart__dot--end {
  fill: var(--white) !important;
}
.growth-chart__svg.is-revealed .growth-chart__area { opacity: 1; }
.growth-chart__svg.is-revealed .growth-chart__line { stroke-dashoffset: 0 !important; }
.growth-chart__svg.is-revealed .growth-chart__dots circle:nth-child(1) { opacity: 1; transition-delay: 200ms; }
.growth-chart__svg.is-revealed .growth-chart__dots circle:nth-child(2) { opacity: 1; transition-delay: 600ms; }
.growth-chart__svg.is-revealed .growth-chart__dots circle:nth-child(3) { opacity: 1; transition-delay: 1000ms; }
.growth-chart__svg.is-revealed .growth-chart__dots circle:nth-child(4) { opacity: 1; transition-delay: 1400ms; }
.growth-chart__svg.is-revealed .growth-chart__dots circle:nth-child(5) { opacity: 1; transition-delay: 1800ms; }

/* 차트 시작점 라벨 (2026 위치, 21.8 억원) — 첫 데이터 포인트(10%) 부근 */
.growth-chart__start-label {
  position: absolute;
  margin: 0;
  left: 12%;                                /* 첫 데이터 포인트 살짝 우측 */
  top: 78%;                                 /* 데이터 포인트 위쪽 */
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: var(--fw-bd);
  color: var(--white);
  line-height: 1;
  letter-spacing: var(--ls);
  white-space: nowrap;
  transform: translateY(-100%);             /* 라벨이 dot 위에 위치 */
}

/* x축 라벨 — 데이터 포인트와 동일하게 10%/30%/50%/70%/90% 위치 */
.growth-chart__xaxis {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);    /* 5등분 → 각 라벨 센터 = 10/30/50/70/90% */
}
.growth-chart__xaxis li {
  text-align: center;
  font-size: var(--text-body-2);
  color: var(--gray-400);
  font-weight: var(--fw-md);
}

/* 50개 dot 시각화 + 설명 — count 라벨은 상단으로 이동 */
.growth__hospitals-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  padding: 40px 56px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.growth-hospitals__dots {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 6px;
}
.growth-hospitals__dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background 200ms var(--ease-out);
}
.growth-hospitals__dot.is-filled {
  background: var(--white);
}
.growth-hospitals__desc {
  margin: 0;
  font-size: var(--text-body-2);
  color: var(--gray-300);
  font-weight: var(--fw-md);
  line-height: 1.5;
}
.growth-hospitals__desc strong {
  color: var(--white);
  font-weight: var(--fw-bd);
}

@media (max-width: 1279px) {
  .growth-section { padding: 80px 22px 100px; }
  .growth__metrics-panel { grid-template-columns: repeat(2, 1fr); padding: 16px 0; }
  /* 태블릿: 2x2 — 좌측 컬럼은 padding-left 0, 우측 컬럼은 padding-right 0 (외곽 정렬) */
  .growth-metric { padding: 24px 24px; }
  .growth-metric + .growth-metric { border-left: 1px solid var(--border); }
  .growth-metric:nth-child(odd) { padding-left: 0; }
  .growth-metric:nth-child(even) { padding-right: 0; }
  .growth-metric:nth-child(3) {
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .growth-metric:nth-child(4) {
    border-top: 1px solid var(--border);
  }
  .growth__chart { padding: 16px 0 0; }
  .growth-chart__head { flex-direction: column; align-items: flex-start; }
  .growth-chart__annotation { text-align: left; }
  .growth-chart__annotation-value { justify-content: flex-start; }
  .growth__hospitals-panel {
    padding: 32px 24px;
    gap: 16px;
  }
}
/* 모바일/소형 모바일 — 1279 공통의 2x2 그리드 + 라인 유지, 패딩만 살짝 축소 */
@media (max-width: 767px) {
  .growth-metric { padding: 20px 16px; }
}

/* ---- 9. Global Network (다크 + 점 세계지도 + 4 파트너 카드 absolute) ---- */
.global-section {
  background: var(--gray-900);
  padding: 120px var(--container-pad) 160px;
  color: var(--gray-200);
}
.global__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.global__head {
  text-align: center;
  margin-bottom: 64px;
}
.global__title {
  margin: 0 0 36px;                          /* 16 → 36 타이틀(밑줄 포함) ↔ 본문 간격 ↑ */
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: var(--fw-bd);
  line-height: 1.3;
  letter-spacing: var(--ls);
  color: var(--white);
}
/* "협력 네트워크" 단어 밑에 그라데이션 라인 — 라플라스 타이틀 underline 과 동일 */
.global__title-accent {
  position: relative;
  display: inline-block;
}
.global__title-accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 20%,
    rgba(255, 255, 255, 0.6) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}
.global__desc {
  margin: 0;
  font-size: var(--text-h5);
  color: var(--gray-200);
  font-weight: var(--fw-md);
  line-height: 1.5;
}
.global__desc-accent {
  font-weight: var(--fw-md);
  color: var(--gray-200);                 /* 본문과 동일 톤 — 강조 효과 제거 */
}

/* 지도 영역 + 4 국기 마커 — 가운데 정렬 */
.global__map {
  position: relative;
  width: 100%;
  max-width: 900px;                            /* 1200 → 900 더 작게 */
  margin: 0 auto 64px;
}
.global__map-img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

/* 국기 마커 — 지도 위 absolute, 호버 시 확대 + 카드 동기 */
.global-pin {
  position: absolute;
  width: 32px;                                 /* 56 → 32 더 작게 */
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.global-pin__flag {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 흰색 아웃라인 (얇게) + 그림자 */
  box-shadow: 0 0 0 1.5px #fff, 0 6px 18px rgba(0, 0, 0, 0.4);
  /* 초기 상태: 보이지 않음 — .is-revealed 부여 시 pop-in */
  transform: scale(0);
  opacity: 0;
  transition: transform 500ms var(--ease-out), opacity 400ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.global-pin.is-revealed .global-pin__flag {
  transform: scale(1);
  opacity: 1;
}
.global-pin__flag svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.global-pin.is-revealed:hover .global-pin__flag,
.global-pin.is-revealed.is-active .global-pin__flag {
  transform: scale(1.35);                      /* 호버 시 크기 확대 (reveal 후에만) */
  box-shadow: 0 0 0 1.5px #fff, 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* 카드 4개 — 가로 4컬럼 (기본: 투명한 화이트, 호버: 진한 화이트+다크 텍스트) */
.global__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.global-card {
  background: rgba(255, 255, 255, 0.06);       /* 기본 — 흰색 6% 투명 */
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  /* gap 제거 — 각 요소별 margin 으로 미세 제어 */
  transition: background 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
  cursor: pointer;
}
.global-card:hover,
.global-card.is-active {
  background: var(--white);                    /* 호버 — 진한 화이트 */
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.global-card__flag {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 0 16px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--gray-200);       /* 1px gray-200 (#e5e8eb) 얇은 아웃라인 */
}
.global-card__flag svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.global-card__title {
  margin: 0 0 4px;                             /* min-height 제거 — 국가명이 타이틀에 바로 붙음 */
  font-size: var(--text-h5);
  font-weight: var(--fw-bd);
  color: var(--white);
  line-height: 1.3;
  transition: color 300ms var(--ease-out);
}
.global-card__country {
  margin: 0;                                   /* 타이틀 바로 아래 */
  font-size: var(--text-body-2);
  color: var(--gray-300);
  font-weight: var(--fw-md);
  transition: color 300ms var(--ease-out);
}
.global-card__role {
  margin: auto 0 0;                            /* 본문은 카드 하단으로 정렬 — 카드 간 본문 위치 일치 */
  padding-top: 16px;
  font-size: var(--text-body-2);
  color: var(--gray-200);
  font-weight: var(--fw-md);
  line-height: 1.5;
  transition: color 300ms var(--ease-out);
}
/* 호버 / active — 텍스트 다크 톤으로 전환 */
.global-card:hover .global-card__title,
.global-card.is-active .global-card__title {
  color: var(--t-strong);
}
.global-card:hover .global-card__country,
.global-card.is-active .global-card__country {
  color: var(--gray-500);
}
.global-card:hover .global-card__role,
.global-card.is-active .global-card__role {
  color: var(--t-strong);
}

@media (max-width: 1279px) {
  .global-section { padding: 80px 22px 100px; }
  .global__head { margin-bottom: 40px; }
  .global__cards { grid-template-columns: repeat(2, 1fr); }
  .global-pin { width: 40px; height: 40px; }
}
@media (max-width: 560px) {
  .global__cards { grid-template-columns: 1fr; }
}

/* 모바일 — 글로벌 카드 개별 reveal (부모 data-reveal-stack 대신 카드별 IntersectionObserver) */
@media (max-width: 767px) {
  .global__cards.js-per-card-reveal .global-card {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);
    will-change: opacity, transform;
  }
  .global__cards.js-per-card-reveal .global-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- 10. CTA (라이트 — tech / growth 헤더와 동일 스타일) ---- */
.cta-section {
  background: var(--white);
  padding: 120px var(--container-pad) 160px;
  color: var(--t-normal);
}
.cta__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}
.cta__title {
  margin: 0 0 16px;
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: var(--fw-bd);
  line-height: 1.3;
  letter-spacing: var(--ls);
  color: var(--t-strong);
}
.cta__desc {
  margin: 0;
  font-size: var(--text-h5);
  color: var(--gray-600);
  font-weight: var(--fw-md);
  line-height: 1.5;
}

/* ---- Footer (라이트 — growth/global 섹션과 동일 화면 마진) ---- */
.footer {
  padding: 80px var(--container-pad) 0;        /* growth/global 과 동일한 좌우 마진 */
  background: var(--white);
  color: var(--gray-700);
  border-top: 1px solid var(--border);
}
.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;                              /* padding 없음 — inner 콘텐츠 위치 = global 과 일치 */
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1.3fr;
  gap: 48px;
}
.footer__brand {
  margin: 0 0 8px;
  font-size: var(--text-h5);
  color: var(--t-strong);
  font-weight: var(--fw-bd);
}
.footer__tagline {
  margin: 0;
  font-size: var(--text-body-3);
  color: var(--gray-600);
  font-weight: var(--fw-md);
  line-height: 1.6;
  white-space: nowrap;                /* 자연 wrap 방지 — 데스크탑은 명시 <br/>, 모바일은 한 줄 유지 */
}
.footer__heading {
  margin: 0 0 16px;
  font-size: var(--text-overline);
  color: var(--gray-500);                      /* gray-600 → gray-500 한 단계 연하게 */
  font-weight: var(--fw-md);
  text-transform: uppercase;
  letter-spacing: 0;
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-body-3);
  color: var(--gray-600);                    /* tagline 과 동일 톤으로 통일 */
  line-height: 1.6;
}
.footer__list li {
  overflow-wrap: anywhere;
}
.footer__list a {
  color: var(--gray-600);
  text-decoration: none;
}
.footer__list a:hover { color: var(--t-strong); }
.footer__copy {
  font-size: var(--text-overline);
  text-align: center;
  /* footer 의 좌우 패딩(container-pad) 을 negative margin 으로 상쇄 → 라인 풀폭 */
  margin: 48px calc(var(--container-pad) * -1) 0;
  padding: 32px var(--container-pad);
  border-top: 1px solid var(--border);
  color: var(--gray-500);
  font-weight: var(--fw-md);
}
.footer__copy a {
  color: var(--gray-500);                   /* copy 본문과 동일 톤으로 통일 */
  text-decoration: none;
}
.footer__copy a:hover { color: var(--t-strong); }

@media (max-width: 767px) {
  .footer { padding: 60px 22px 0; }
  .footer__copy { margin: 48px -22px 0; padding: 32px 22px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  /* Business/Contact 하위 항목 — 세로 → 가로 정렬 (wrap 허용) */
  .footer__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
  }
  /* 모바일 — 푸터 텍스트 한 단계 ↓ */
  .footer__brand { font-size: var(--text-body-1); }       /* h5 20 → body-1 18 */
  .footer__tagline { font-size: var(--text-overline); }   /* body-3 14 → overline 12 */
  .footer__list { font-size: var(--text-overline); }      /* body-3 14 → overline 12 */
}

/* ============================================================
   Reveal Animation (IntersectionObserver hook)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- 섹션 타이틀 reveal (pretitle → title → desc 순차) — 좀 더 부드럽고 길게 ---- */
[data-reveal-stack] > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal-stack].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stack].is-revealed > *:nth-child(2) { transition-delay: 180ms; }
[data-reveal-stack].is-revealed > *:nth-child(3) { transition-delay: 360ms; }
[data-reveal-stack].is-revealed > *:nth-child(4) { transition-delay: 540ms; }
[data-reveal-stack].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Responsive — 통합 반응형 (각 섹션별 인라인 미디어쿼리 보완 + 글로벌)
   ============================================================ */

/* ---- 브레이크포인트: 모바일 ≤767 / 태블릿 768~1279 / 데스크탑 ≥1280 ---- */
/* ---- 컨테이너 패딩: 데스크탑 60 → 태블릿 40 → 모바일 22 ---- */
@media (max-width: 1279px) {
  :root { --container-pad: 40px; }
}
@media (max-width: 767px) {
  :root { --container-pad: 22px; }
}

/* ---- 앵커 스크롤 보정 — fixed 헤더(72/64px) 에 가려져 타이틀 잘리는 문제 방지 ---- */
section[id] { scroll-margin-top: 88px; }
@media (max-width: 767px) {
  section[id] { scroll-margin-top: 76px; }
}

/* ---- mobile-only 줄바꿈 유틸리티 ---- */
.br-mobile { display: none; }
@media (max-width: 767px) {
  .br-mobile { display: inline; }
}

/* ---- tablet-only 줄바꿈 유틸리티 ---- */
.br-tablet { display: none; }
@media (min-width: 768px) and (max-width: 1279px) {
  .br-tablet { display: inline; }
}

/* ---- desktop+tablet 줄바꿈 유틸리티 (모바일에서만 숨김) ---- */
.br-desktop { display: inline; }
@media (max-width: 767px) {
  .br-desktop { display: none; }
}

/* ---- 일반 모바일 only 줄바꿈 (481~767) — 소형 모바일에서 숨김 ---- */
.br-mobile-only { display: none; }
@media (min-width: 481px) and (max-width: 767px) {
  .br-mobile-only { display: inline; }
}

/* ---- 소형 모바일 only 줄바꿈 (≤480) ---- */
.br-small { display: none; }
@media (max-width: 480px) {
  .br-small { display: inline; }
}

/* ---- 모바일에서 br-mobile 도 소형 제외 (br-mobile-only 와 동일 의미로 통일) ---- */
@media (max-width: 480px) {
  .br-mobile { display: none; }
}

/* ---- 태블릿+모바일(≤1279) 공통 ---- */
@media (max-width: 1279px) {
  /* 섹션 패딩 축소 — section-pad 자체 축소 */
  :root { --section-pad: 96px; }

  /* Footer 3컬럼 → 2컬럼 (브랜드는 위 한 줄, 메뉴 2개는 아래 가로) */
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

/* ---- 태블릿/모바일 공통: 메뉴 숨김 — 헤더에 로고만 노출 ---- */
@media (max-width: 1279px) {
  .nav__menu { display: none; }
}

/* ---- 모바일(≤767) ---- */
@media (max-width: 767px) {
  /* 모바일 로고 사이즈 축소 */
  .nav__logo img { height: 22px; }

  /* 섹션 패딩 추가 축소 */
  :root { --section-pad: 72px; }

  /* Hero 타이틀 모바일 — 한 화면에 맞도록 */
  .hero__title { font-size: clamp(56px, 18vw, 96px); }
  .hero__sub { font-size: var(--text-body-1); line-height: 1.55; }   /* body-2 → body-1 한 단계 ↑ (16 → 18) */
  .hero__scroll-line { height: 64px; }

  /* Business 모바일 — 다른 섹션 타이틀과 동일 */
  .business__title { font-size: clamp(26px, 6.5vw, 36px); }
  /* 사업분야 카드 — 타이틀/영어/본문 모두 한 단계 더 ↑ + 카드 내부 패딩 충분히 */
  .biz-card__text { padding: 48px 40px; }
  .biz-card__title { font-size: var(--text-h2); }                    /* h3 → h2 (clamp 28~40) */
  .biz-card__en { font-size: var(--text-h5); margin-bottom: 16px; }  /* h4 → h5 한 단계 ↓ (24 → 20) */
  /* 본문 — <br> 기준으로만 줄바꿈, 구절 내부에서는 줄바꿈 금지 */
  .biz-card__desc { font-size: var(--text-body-2); white-space: nowrap; }   /* 모바일 16px */

  /* 각 섹션 메인 타이틀/본문 중앙정렬 — 사업분야 / R&D / 라플라스 / 핵심기술력 / 성장 / 글로벌 */
  .business__head,
  .mso__head,
  .tech__head,
  .growth__head,
  .global__head,
  .rnd__content > [data-reveal-stack] { text-align: center; }

  /* 성장 메트릭 4개 — 모바일 중앙정렬 (label/value 모두 가운데) */
  .growth-metric { align-items: center; text-align: center; }
  .growth-metric__value { justify-content: center; }

  /* R&D Step 간격 ↑ — step ↔ 디바이더 라인 사이 여백 확대 (20 → 40) */
  .rnd__step { padding: 40px 0; }


  /* MSO bg 이미지 — 모바일에서 더 페이드 */
  .mso__title { font-size: clamp(26px, 6.5vw, 36px); }
  .mso__desc { font-size: var(--text-h5); }                       /* 16 → 20 */
  .mso__pretitle { font-size: var(--text-body-2); }

  /* MSO 타임라인 카드 패딩 축소 */
  .mso-timeline__content { padding: 28px 24px; }
  .mso-timeline__year { font-size: var(--text-h3); }

  /* MSO 지원 — 모바일 한 단계씩 ↓ (num/title h4→h5, desc body-1→body-2) */
  .mso-support-item { gap: 16px; }                             /* 24 → 16 (타이틀과 본문 사이 간격 축소) */
  .mso-support-item__title { font-size: var(--text-h5); }     /* h4 → h5 한 단계 ↓ */
  .mso-support-item__num { font-size: var(--text-h5); }       /* h4 → h5 한 단계 ↓ */
  .mso-support-item__desc { font-size: var(--text-body-2); margin-top: -8px; }   /* body-1 → body-2 한 단계 ↓ */

  /* MSO 타임라인 라벨 (강남직영점 오픈 / 전국 거점 프랜차이즈 모집) */
  .mso-timeline__label { font-size: var(--text-body-1); }      /* body-2 → body-1 (16 → 18) */

  /* Global 카드 (XEME/NULOOK/BOAO/Ginza) — 모바일 한 단계씩 ↓ */
  .global-card__title { font-size: var(--text-body-1); }       /* h5 → body-1 한 단계 ↓ (20 → 18) */
  .global-card__country { font-size: var(--text-body-3); }     /* body-2 → body-3 한 단계 ↓ (16 → 14) */
  .global-card__role { font-size: var(--text-body-2); }        /* body-1 → body-2 한 단계 ↓ (18 → 16) */

  /* Tech 타이틀 사이즈 축소 */
  .tech__title { font-size: clamp(26px, 6.5vw, 36px); }
  .tech__desc { font-size: var(--text-h5); }                     /* 20 유지 — 데스크탑과 동일 */
  .tech-item__title { font-size: var(--text-h4); }
  .tech-item__num { font-size: var(--text-h4); }
  .tech-item__desc { font-size: var(--text-body-3); line-height: 1.65; }
  .tech-item__desc br { display: none; }

  /* R&D 타이틀 사이즈 축소 */
  .rnd__title { font-size: clamp(26px, 6.5vw, 36px); }
  .rnd__desc { font-size: var(--text-h5); white-space: normal; }  /* 모바일은 자연 wrap 허용, 사이즈 20 */
  .rnd__step-label { font-size: var(--text-h4); }
  /* 모바일 — 1/2/3 step 좌측정렬 (번호가 트랙 라인 위에 모두 정렬되도록 데스크탑과 동일) */
  .rnd__step-desc { font-size: var(--text-body-1); margin-left: 42px; text-align: left; }
  .rnd__product-card { padding: 28px 24px; }
  .rnd__product-title { font-size: var(--text-h5); }                      /* h4 → h5 한 단계 ↓ (24 → 20) */
  .rnd__product-list li { font-size: var(--text-body-2); }                /* body-1 → body-2 한 단계 ↓ (18 → 16) */

  /* Growth 타이틀 사이즈 축소 */
  .growth__title { font-size: clamp(26px, 6.5vw, 36px); }
  .growth-metric__label { font-size: var(--text-body-3); }
  .growth-metric__value { font-size: clamp(30px, 8vw, 40px); }
  .growth-metric__unit { font-size: var(--text-h5); }

  /* Global 타이틀 + 카드 패딩 축소 */
  .global__title { font-size: clamp(26px, 6.5vw, 36px); }
  .global__head { margin-bottom: 64px; }                 /* 1279 공통 40 오버라이드 — 본문↔지도 간격 ↑ */
  .global__desc { font-size: var(--text-h5); }                    /* 16 → 20 */
  .global-card { padding: 24px 22px; }
  .global-card__title { font-size: var(--text-h5); }                      /* body-1 → h5 (18 → 20) */
  .global-card__country { font-size: var(--text-body-2); }                /* body-3 → body-2 (14 → 16) */
  .global-card__role { font-size: var(--text-body-1); padding-top: 12px; } /* body-3 → body-1 (14 → 18) */
  .global-pin { width: 22px; height: 22px; }
}

/* ---- 태블릿 전용 오버라이드 (모든 1279px 공통 규칙보다 뒤에 위치 — 캐스케이드 우선순위 확보) ---- */
@media (min-width: 768px) and (max-width: 1279px) {
  /* R&D 제품 카드 — 3 컬럼 균등 분할 (minmax(0,1fr) — 콘텐츠 길이와 무관하게 카드 폭 동일) */
  .rnd__products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* 타이틀 — 영어/한글을 2 줄로 분리 (column 방향) + 각 줄은 nowrap 유지 */
  .rnd__product-title {
    font-size: var(--text-h4);
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 4px;
  }
  /* 본문 — 한 줄 유지 (긴 항목도 줄바꿈 금지) + 사이즈 추가 축소 + 카드 패딩 축소로 폭 확보 */
  .rnd__product-card { padding: 32px 20px; }
  .rnd__product-list { gap: 8px; }                /* 12 → 8 본문 간격 축소 */
  .rnd__product-list li {
    font-size: 13px;
    white-space: nowrap;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 8px;                            /* 점 ↔ 본문 간격 축소 (12 → 8) */
  }
  /* 본문 앞 작은 점 — 체크 아이콘 대체 */
  .rnd__product-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;                                  /* 첫 줄 텍스트 중앙 정렬 */
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gray-500);
  }
  /* 체크 아이콘 숨김 — 좁아진 카드 폭 확보 */
  .rnd__product-check { display: none; }


  /* MSO 개원/개원예정 카드 — 가로 폭 확장 (1279 공통의 380px 오버라이드), 콘텐츠 중앙정렬 유지 */
  .mso__cards { max-width: 680px; }

  /* MSO 지원 영역 (경영지원/브랜딩/의료표준화) — 3 컬럼 가로 정렬 (1279 공통의 1fr 오버라이드) */
  .mso__support-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }

  /* 헤더 로고 — 좌측 padding 축소로 로고를 더 왼쪽으로 (데스크탑 40px → 태블릿 20px) */
  .nav { padding-left: 20px; }

  /* 글로벌 지도 핀 — 1279 공통 40px 오버라이드, 한 단계 축소 */
  .global-pin { width: 28px; height: 28px; }

  /* 사업분야 카드 본문 — 1279 공통의 body-3 (14px) 오버라이드, 한 단계 ↑ (16px) */
  .biz-card__desc { font-size: var(--text-body-2); }                /* 태블릿 16px (데스크탑과 동일) */

  /* 태블릿 — MSO / 성장 / 글로벌 / R&D 중앙정렬 (사업분야 / 핵심기술만 데스크탑과 동일하게 좌측 유지) */
  .mso__head,
  .growth__head,
  .global__head,
  .rnd__content > [data-reveal-stack] { text-align: center; }

  /* 태블릿 — 성장 메트릭 4개 셀 내부 중앙정렬 (모바일과 동일 정책) */
  .growth-metric { align-items: center; text-align: center; }
  .growth-metric__value { justify-content: center; }
}

/* ---- 태블릿+모바일 공통 — MSO 하단 페이드 처리 (검정 가로 라인 제거) ---- */
@media (max-width: 1279px) {
  /* ::after 페이드 대신 mso__roadmap-area 자체에 background-gradient 적용 */
  .mso__roadmap::after { display: none; }
  .mso__roadmap { background: transparent; }
  .mso__roadmap-area {
    background: linear-gradient(
      to bottom,
      var(--gray-900) 0%,
      var(--gray-900) 50%,
      rgba(255, 255, 255, 0.2) 72%,
      rgba(255, 255, 255, 0.75) 88%,
      var(--white) 96%,
      var(--white) 100%
    );
  }
  /* 타임라인 트랙 — 흰색 페이드 영역에서 라인이 사라지도록 mask 하단 페이드 (mso__roadmap-area::after spacer 는 전역 정의 사용) */
  .mso-timeline__track {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 120px, black 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, black 120px, black 55%, transparent 100%);
  }
}

/* ---- 가로형 태블릿 (1024~1279) — 데스크탑처럼 헤더 메뉴 노출 + 좌우 padding 균등 복원 ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__menu { display: flex; }
  .nav { padding: 0 40px; }              /* 좁은 태블릿용 padding-left 20px 오버라이드 — 데스크탑과 동일 */
}

/* ---- 태블릿+모바일 공통 — 터치 디바이스에서 타이틀 확대 모션 제거 (sticky hover 방지) ---- */
@media (max-width: 1279px) {
  .rnd__product-card:hover .rnd__product-title { transform: none; }
}

/* ---- 소형 모바일(≤480) — 최소 디테일 ---- */
@media (max-width: 480px) {
  .hero__pretitle { font-size: var(--text-body-2); }
  /* .biz-card width 82vw 제거 — 모바일 base 의 width:100% 유지 (sticky padding 22px 빼고 가득, 중앙 정렬 효과) */
  .mso-card__date { font-size: 28px; }
  .mso-card__badge {
    font-size: var(--text-body-3);
    padding: 6px 12px;
    top: -4px;                        /* 뱃지를 살짝 위로 — 날짜와 시각 중앙 정렬 보정 */
  }

  /* hero-intro 두 line 을 inline 으로 — 인위적 줄바꿈 없이 가로폭에 따라 자연 wrap */
  .hero-intro__line { display: inline; }

  /* 각 섹션 메인 타이틀 아래 본문(desc) — 소형 모바일에서 두 단계 ↓ (h5 20 → body-2 16) */
  .mso__desc,
  .tech__desc,
  .rnd__desc,
  .global__desc { font-size: var(--text-body-2); }

  /* hero 본문 — 소형 모바일 한 단계 ↓ (body-1 18 → body-2 16) */
  .hero__sub { font-size: var(--text-body-2); }

  /* 사업분야 카드 4종 — 소형 모바일 패딩 축소 + 텍스트 모두 한 단계씩 더 ↓ (정사각형 안에 안 잘리도록) */
  .biz-card__text { padding: 24px 20px; }
  .biz-card__title { font-size: var(--text-h4); }                    /* h3 → h4 (24) */
  .biz-card__en { font-size: var(--text-body-1); margin-bottom: 12px; } /* h5 → body-1 (20 → 18) */
  .biz-card__desc { font-size: var(--text-body-3); white-space: normal; }  /* 14 유지 + 패딩 넘어가면 자연 wrap 허용 */

  /* 통증/피부/면역 카드 — 타이틀 한 단계 ↓, 본문 14, 체크 아이콘 ↓, min-height 제거 */
  .rnd__product-card { min-height: 0; }                              /* 1279 공통 220px 오버라이드 — 아래 빈 공간 제거 */
  .rnd__product-title { font-size: var(--text-body-1); }             /* h5 → body-1 한 단계 더 ↓ (20 → 18) */
  .rnd__product-list li { font-size: var(--text-body-3); }           /* body-2 → body-3 (16 → 14) */
  .rnd__product-check { width: 14px; height: 14px; }                 /* 18 → 14 */

  /* R&D Step (임상/연구/상용화) — 소형 모바일 모든 콘텐츠 한 단계씩 ↓ */
  .rnd__step-num { width: 24px; height: 24px; font-size: 14px; }     /* 28/16 → 24/14 */
  .rnd__step-ko { font-size: clamp(18px, 5vw, 22px); }               /* 한글 한 단계 ↓ */
  .rnd__step-en { font-size: var(--text-body-2); }                   /* 영문 한 단계 ↓ (18 → 16) */

  /* 성장궤도 4 메트릭 — 소형 모바일은 1 컬럼 세로 stack + 라인 모두 제거 */
  .growth__metrics-panel { grid-template-columns: 1fr; padding: 0; }
  .growth-metric {
    padding: 20px 0;
    border-left: none !important;
    border-top: none !important;
  }

  /* MSO 지원 카드 (01/02/03 경영지원·브랜딩·의료표준화) — 모든 콘텐츠 한 단계 ↓ */
  .mso-support-item__num { font-size: var(--text-h5); }          /* h4 → h5 (24 → 20) */
  .mso-support-item__title { font-size: var(--text-h5); }        /* h4 → h5 (24 → 20) */
  .mso-support-item__desc { font-size: var(--text-body-2); }     /* body-1 → body-2 (18 → 16) */

  /* 글로벌 파트너 카드 — 모든 텍스트 한 단계 ↓ */
  .global-card__title { font-size: var(--text-body-1); }         /* h5 → body-1 (20 → 18) */
  .global-card__country { font-size: var(--text-body-3); }       /* body-2 → body-3 (16 → 14) */
  .global-card__role { font-size: var(--text-body-2); }          /* body-1 → body-2 (18 → 16) */

  /* MSO 타임라인 — 소형 모바일에서 라인·점·카드를 좌측 안쪽으로 이동 + 카드 폭 축소
     (라인↔카드 32px diff 유지 — dot 위치 자동 정렬) */
  .mso-timeline__track { left: max(24px, calc(50% - 176px)); }
  .mso-timeline__list {
    width: 260px;
    margin-left: max(56px, calc(50% - 144px));
  }
}