/* ============================================================
   LIMPID · Home
   섹션 순서대로 적어 둔다. 한 섹션씩 찾아서 고치면 된다.

     1. 헤더
     2. 히어로
     3. 통합 설명
     3-2. 사업부문 (스크롤 아코디언)
     3-3. 헬스케어 (다크 3D 입자 핀)
     6. 솔루션 (카드 3장)
     8. 연혁
     9. 뉴스
    11. 푸터
   ============================================================ */

/* ============ 1. 헤더 ============
   integratedbio.com 구조 실측 이식.
   PC : 맨로고(top 45, 로고 h23) + 흰 알약(top 30 · h54 · r12 · bg 255/.8 · blur14)
        항목 h39 r8 pad 17 / Hiring 칩 h46 r8 인셋 4
   MO : 플로팅 바(top 20 · h64 · r16) 로고 + 다크 버거 48x48 r12
        열면 바가 어두워지고 같은 자리에서 다크 패널이 아래로 자라난다
   플로팅 : fixed. 스크롤해도 형태 변화 없음 (원본과 동일)
   ================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}
.header > * { pointer-events: auto; }

/* ---- PC 로고 ----
   t1energy 패턴. 히어로 위에서는 좌측 맨몸 흰 로고,
   히어로를 벗어나면 좌측 로고는 사라지고 알약 왼쪽 끝에 도킹된다.
   좌측이 비므로 스크롤 중 섹션 구분선이 로고를 관통할 일도 없다 */
.hdr__logo {
  position: absolute;
  top: 45px;
  left: var(--edge);
  display: flex;
  align-items: center;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hdr__logo img {
  height: 23px;
  width: auto;
  filter: brightness(0) invert(1);           /* 영상 위에서는 흰색 */
}
.header.is-past-hero .hdr__logo {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* 알약 안 도킹 로고.
   폭이 열리는 동안은 투명하게 두고, 자리가 잡힌 뒤에 페이드+슬라이드로 나타난다.
   (폭 펼침이 그대로 보이면 로고가 "펼쳐지는" 어색한 인상을 준다) */
.hdr__pill-logo {
  display: flex;
  align-items: center;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  padding-left: 0;
  margin-right: 0;
  transform: translateX(-8px);
  transition: max-width .4s var(--ease), padding .4s var(--ease), margin .4s var(--ease),
              opacity .22s var(--ease), transform .4s var(--ease-out);
}
.hdr__pill-logo img { height: 17px; width: auto; }
.header.is-past-hero .hdr__pill-logo {
  max-width: 110px;
  opacity: 1;
  padding-left: 11px;
  /* 로고-첫 메뉴 간격 = 메뉴 글자끼리 간격(17+2+17)과 동일하게 */
  margin-right: 17px;
  transform: none;
  /* 폭·여백 먼저, 로고 등장은 .14s 뒤 */
  transition-delay: 0s, 0s, 0s, .14s, .14s;
}

/* ---- PC 알약 ---- */
.hdr__pill {
  position: absolute;
  top: 30px;
  right: var(--edge);
  display: none;                              /* 데스크톱에서만 */
  align-items: center;
  gap: 2px;
  height: 54px;
  /* Hiring 버튼 폐기(2026-08-11) 후 마지막 요소가 텍스트 토글이라 좌우 대칭 여백 */
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hdr__item {
  display: inline-flex;
  align-items: center;
  height: 39px;
  padding-inline: 17px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease);
}
.hdr__item:hover { background: rgba(15, 21, 35, .07); }

/* ---- Solution 드롭다운 : 알약 항목에 마우스오버하면 아래로 펼쳐진다 (킨포라·트러스티푸드·엘브이) ---- */
.hdr__item-wrap { position: relative; display: inline-flex; }
/* 알약 항목과 드롭다운 사이 10px 틈에서 마우스가 벗어나 hover 가 꺼지는 것을 막는 투명 다리 */
.hdr__item-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}
.hdr__item--drop::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .5;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.hdr__item-wrap:hover .hdr__item--drop::after,
.hdr__item-wrap:focus-within .hdr__item--drop::after {
  transform: translateY(0) rotate(225deg);
}
.hdr__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  min-width: 152px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15, 21, 35, .06);
  box-shadow: 0 20px 40px -12px rgba(15, 21, 35, .18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.hdr__item-wrap:hover .hdr__drop,
.hdr__item-wrap:focus-within .hdr__drop {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.hdr__drop-item {
  display: flex;
  align-items: center;
  height: 36px;
  padding-inline: 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.hdr__drop-item:hover { background: rgba(15, 21, 35, .07); }

/* ---- 언어 토글 (KO ↔ EN) : 메뉴와 Hiring 사이의 작은 텍스트 버튼.
   앞에 얇은 세로 구분선을 둬 내비게이션과 성격이 다름을 표시 ---- */
.hdr__lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 39px;
  padding-inline: 14px;
  margin-left: 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .08em;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.hdr__lang::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--line-strong);
}
.hdr__lang:hover { color: var(--ink); background: rgba(15, 21, 35, .07); }

/* .hdr__cta(Hiring 버튼)는 2026-08-11 대표 지시로 헤더에서 폐기 */

/* ---- MO 플로팅 바 ---- */
.hdr__bar {
  position: absolute;
  top: 20px;
  left: var(--gutter);
  right: var(--gutter);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 6px 13px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--dur) var(--ease);
  z-index: 2;
}
.hdr__logo-m { display: flex; align-items: center; }
.hdr__logo-m img { height: 15px; width: auto; transition: filter var(--dur) var(--ease); }

.hdr__burger {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--ink);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  transition: background var(--dur) var(--ease);
}
.hdr__burger i {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: transform var(--dur) var(--ease);
}

/* ---- 열림 : 바가 어두워지고 패널과 한 덩어리가 된다 ---- */
.header.is-open .hdr__bar { background: #1d2639; }
.header.is-open .hdr__logo-m img { filter: brightness(0) invert(1); }
.header.is-open .hdr__burger { background: rgba(255, 255, 255, .12); }
.header.is-open .hdr__burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.header.is-open .hdr__burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---- MO 펼침 패널 ---- */
.hdr__popup {
  position: absolute;
  top: 20px;
  left: var(--gutter);
  right: var(--gutter);
  border-radius: 16px;
  /* 푸터(--surface-dark)와 겹칠 때 한 덩어리로 안 보이게:
     한 단계 밝은 남색 + 얇은 윤곽선 + 그림자로 "떠 있는 패널" */
  background: #1d2639;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .55);
  overflow: hidden;
  max-height: 48px;
  opacity: 0;
  pointer-events: none;
  transition: max-height .55s cubic-bezier(.22, .61, .36, 1), opacity .3s var(--ease);
  z-index: 1;
}
.header.is-open .hdr__popup { max-height: min(560px, calc(100svh - 40px)); opacity: 1; pointer-events: auto; }

.hdr__popup-links { padding: 64px 24px 22px; display: grid; }

/* ---- 모바일 메뉴 하단 언어 스위치 : 현재 언어는 점등(span), 반대 언어만 링크 ---- */
.hdr__popup-lang {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  font-weight: 550;
}
.hdr__popup-lang a { color: rgba(255, 255, 255, .45); transition: color var(--dur-fast) var(--ease); }
.hdr__popup-lang a:hover { color: #fff; }
.hdr__popup-lang .is-on { color: #fff; }
.hdr__popup-lang i { width: 1px; height: 12px; background: rgba(255, 255, 255, .2); }
.hdr__popup-links a {
  padding: 11px 0;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.header.is-open .hdr__popup-links a { opacity: 1; transform: none; }
.header.is-open .hdr__popup-links a:nth-child(2) { transition-delay: .05s; }
.header.is-open .hdr__popup-links a:nth-child(3) { transition-delay: .1s; }
.header.is-open .hdr__popup-links a:nth-child(4) { transition-delay: .15s; }
.header.is-open .hdr__popup-links a:nth-child(5) { transition-delay: .2s; }


@media (min-width: 1025px) {
  .hdr__pill { display: inline-flex; }
  .hdr__bar, .hdr__popup { display: none; }
}
@media (max-width: 1024px) {
  .hdr__logo { display: none; }
}

/* ============ 2. 히어로 ============
   영상 한 장이 화면을 꽉 채우고, 그 위에 좌하단 카피 / 우하단 뉴스카드.
   PC 는 두 덩어리가 같은 바닥선(96px)에 정렬되고,
   모바일은 세로로 쌓여 카드가 화면 맨 아래에 붙는다.
   ================================== */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #12161f;
  color: #fff;
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }

/* 포스터가 아래, 영상이 위. 영상이 못 뜨면 포스터가 그대로 보인다 */
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vimeo 배경 임베드는 16:9 로 고정이라 화면을 덮으려면 넘치게 키워야 한다.
   가로가 남으면 vw 기준, 세로가 남으면 vh 기준으로 커진다 */
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;          /* 100vw x 9/16 */
  min-width: 177.78vh;      /* 100vh x 16/9 */
  min-height: 100vh;
  border: 0;
  pointer-events: none;
  /* 재생이 시작되기 전에는 숨긴다. Vimeo 로딩·오류 화면이 포스터를 덮지 않게 */
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.hero__video.is-playing { opacity: 1; }

/* 영상이 들어오기 전 자리. <video> 로 교체하면 이 규칙은 안 쓰인다 */
.hero__media[data-ph] {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg,
      rgba(255, 255, 255, .045) 0 12px,
      rgba(255, 255, 255, .015) 12px 24px),
    linear-gradient(160deg, #2b3346, #171c27 60%);
}
.hero__media[data-ph]::after {
  content: attr(data-ph);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, .34);
  text-align: center;
  padding: 0 24px;
}

/* 흰 글씨가 읽히도록 위아래만 눌러 준다 */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, .38) 0%,
      rgba(0, 0, 0, .10) 20%,
      rgba(0, 0, 0, 0) 38%,
      rgba(0, 0, 0, .40) 74%,
      rgba(0, 0, 0, .66) 100%);
  pointer-events: none;
}

.hero__content {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  bottom: var(--hero-pad-b);
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.hero__title {
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: #fff;
  text-wrap: balance;
}

.hero__lead .pill-btn { margin-top: 24px; }

/* 반투명 알약 버튼. Discover 실측 100x49 / r16 */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 49px;
  padding-inline: 22px;
  border-radius: 16px;
  background: rgba(23, 23, 23, .5);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  transition: background var(--dur-fast) var(--ease);
}
.pill-btn:hover { background: rgba(23, 23, 23, .78); }

/* ---- 우하단 뉴스 카드 ---- */

.hero__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--card-thumb);
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 16px;
  background: rgba(23, 23, 23, .5);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  color: #fff;
  transition: background var(--dur-fast) var(--ease);
}
.hero__card:hover { background: rgba(23, 23, 23, .74); }

.hero__card-text { padding-left: 10px; }

.hero__card-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 16px;
  text-transform: uppercase;
  color: #fff;
}


.hero__card-title {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero__card-thumb {
  width: var(--card-thumb);
  height: var(--card-thumb);
  border-radius: 12px;
  min-height: 0;
  border: 0;
  background:
    repeating-linear-gradient(-45deg,
      rgba(255, 255, 255, .07) 0 8px,
      rgba(255, 255, 255, .02) 8px 16px),
    rgba(255, 255, 255, .08);
}
.hero__card-thumb::after { font-size: 10px; color: rgba(255, 255, 255, .42); }

/* ---- 히어로 치수 ---- */

:root {
  --hero-pad-b: 15px;
  --card-thumb: 80px;
}

@media (min-width: 768px) {
  :root { --hero-pad-b: 40px; }
}

@media (min-width: 1025px) {
  :root { --hero-pad-b: 96px; --card-thumb: 100px; }

  .header__logo { top: 36px; }

  /* PC 는 카피와 카드가 같은 바닥선에 나란히 선다 */
  .hero__content {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }
  .hero__title { line-height: 1; max-width: 15ch; }
  .hero__lead .pill-btn { margin-top: 48px; }
  .hero__card { width: 346px; flex: none; }
  .hero__card-text { padding-left: 10px; }
}

/* ============ 3. 통합 설명 ============
   integratedbio.com 의 "The integrated platform" 블록 구조.
   실측(1440): 좌측 칩 x48 h30 r8 / 우측 본문 x509
               제목 76/83.6 ls -.02em 2톤(진한 앞 + 흐린 뒤)
               본문 19/24.7 폭 750 / CTA h48 = 다크 알약 + 액센트 버튼
   실측(390) : 1단, 여백 24, 칩 12px, 제목 26/28.6, 본문 16/20.8
   ================================== */

.plat { background: var(--paper-soft); }

.plat__grid {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  gap: clamp(28px, 3vw, 40px);
  align-items: start;
}

.plat__chip {
  display: inline-flex;
  justify-self: start;   /* 그리드 칸을 다 채우지 않게 */
  align-items: center;
  gap: 10px;
  height: 30px;
  padding-inline: 11px;
  border-radius: 8px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
/* 마커 모양·크기는 base.css 의 .mark-dot 이 단일 출처. 여기선 색만 지정 */
.plat__chip::before { background: var(--brand); }

/* 앞 절반은 진하게, 뒤 절반은 흐리게. 원본의 2톤 헤드라인 */
.plat__title {
  font-size: clamp(1.75rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
.plat__title em { font-style: normal; color: var(--ink-faint); }

.plat__body {
  margin-top: clamp(26px, 3.4vw, 56px);
  max-width: 42em;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.74;
  color: var(--ink-2);
}

.plat__cta {
  margin-top: clamp(26px, 3.6vw, 58px);
  display: flex;
  gap: 4px;
}
.plat__cta-main {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding-inline: 22px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.plat__cta-main:hover { background: var(--brand-deep); }

.plat__cta-go {
  display: inline-grid;
  place-items: center;
  width: 51px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.plat__cta-go:hover { background: var(--brand-deep); transform: translateX(2px); }

@media (max-width: 1024px) {
  .plat__grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }
}

/* ============ 3. 사업부문 ============
   apr-in.com 구조. 스크롤에 맞춰 행이 위에서부터 차례로 접힌다.
   실측(1440): 행 열림 630 / 접힘 180, 좌우 여백 50, 라벨 칼럼 170,
               제목 45/45 w400 ls -1px, 이미지 402 x (569 -> 119)
   실측(390) : 행 = 100vh 한 장씩, 여백 20, 라벨 13, 제목 30/30, 이미지 350x408
   ================================== */

.biz {
  position: relative;
  background: var(--paper);
  /* APR 실측 : 섹션 앞뒤로 흰 숨구멍. PC 161 / 모바일 60 */
  margin-block: clamp(60px, 11.2vw, 161px);
}

.biz__row {
  border-top: 1px solid var(--line);
  padding: 32px var(--edge) 40px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.biz__row:last-child { border-bottom: 1px solid var(--line); }

/* 모바일 : APR 실측 인터랙션. 행이 위를 덮는 게 아니라
   고정된 행의 높이가 아래에서부터 접히며(적재) 다음 행이 그 자리를 잇는다.
   PC 아코디언과 같은 원리 - 열림 100svh / 접힘 0. 높이는 JS 가 조절한다 */
@media (max-width: 1024px) {
  /* PC 와 같은 원리. 행이 라벨+제목 띠(172px)로 접혀 아래로 쌓이며 계속 보인다.
     천천히 접히도록 스크롤 구간을 길게 잡는다 */
  .biz { height: calc(100vh + 2200px); height: calc(100svh + 2200px); }
  .biz__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding-top: 74px;            /* 플로팅 바 아래에서 시작 (APR 의 핀 오프셋 54 상당) */
    overflow: hidden;
  }
  .biz__row {
    height: 70vh;                 /* JS 가 곧바로 실제 값으로 바꾼다 */
    min-height: 0;
    overflow: hidden;
    background: var(--paper);
  }
}

.biz__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.15;
  color: var(--ink);
}
.biz__label::before { background: var(--brand); }

.biz__title {
  margin-top: 13px;
  font-size: 30px;
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -.033em;
  color: var(--ink);
}

.biz__sub {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-2);
}

.biz__media {
  margin-top: 48px;
  width: 100%;
  aspect-ratio: 350 / 408;
  border-radius: 0;
}

/* ---- 데스크톱: 핀 + 순차 접힘 ---- */

@media (min-width: 1025px) {
  /* APR 실측 : 핀 고정선 54, 행 열림 630 / 접힘 180 */
  :root { --biz-pin-top: 54px; --biz-shut: 180px; --biz-open: 630px; --biz-range: 1400px; }

  /* 접힌 3행(540) 만큼만 실제로 자리를 차지하고, 나머지는 스크롤 구간이다 */
  .biz {
    height: calc(var(--biz-shut) * 3 + var(--biz-pin-top) + var(--biz-range));
  }
  .biz__pin {
    position: sticky;
    top: var(--biz-pin-top);
    height: calc(var(--biz-shut) * 3);
  }

  .biz__row {
    height: var(--biz-open);        /* JS 가 이 값을 줄인다 */
    min-height: 0;
    /* APR 실측 : 제목 +26 / 하단 30 */
    padding: 26px var(--edge) 30px;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 402px;
    align-items: start;
    overflow: hidden;
    background: var(--paper);
  }
  .biz__row:last-child { border-bottom: 0; }

  .biz__label { font-size: 15px; letter-spacing: -.01em; padding-top: 5px; }  /* APR: 라벨은 제목보다 5px 아래 */
  .biz__title { margin-top: 0; font-size: 45px; line-height: 1; letter-spacing: -.022em; }
  .biz__sub { margin-top: 6px; font-size: 15px; line-height: 1.5; max-width: 460px; }  /* APR: 제목 라인 바로 아래 붙는다 */

  .biz__media {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    margin-top: 5px;              /* APR: 이미지 상단 +31 (26+5), 높이 569 */
    width: 402px;
    aspect-ratio: auto;
    height: 100%;
    border-radius: 0;
  }
  .biz__text { grid-column: 2; }
}

/* ============ 3-3. 헬스케어 (다크 · 3D 입자) ============
   랩 A안 v4.1 이식. 배경은 --surface-dark, 액센트는 다크면 전용 #7ea8ee
   (base.css 의 .section--ink 가 쓰는 값과 동일) 로 본편 톤에 맞춘다.
   입자 엔진은 js/hc.js.
   ================================== */

.hc {
  position: relative;
  /* 다크면 액센트 : 대표 확정(2026-08-10) 진한 브랜드 파랑. 공통 토큰(--brand-on-dark)과
     의도적으로 다르다 - 이 섹션만 브랜드 채도를 유지한다. 원색 #2351a3 은 대비 미달로 금지 */
  --hcg: #3a76d8;
  --hc-fg: #ffffff;
  --hc-fg2: rgba(255, 255, 255, .74);
  --hc-fg3: rgba(255, 255, 255, .46);
}
.hc__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  background: var(--surface-dark);
  color: var(--hc-fg2);
}
.hc canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 캡션 (좌하단) */
.hc .caps { position: absolute; left: var(--edge); bottom: clamp(72px, 12vh, 128px); right: var(--edge); }
.hc .cap { position: absolute; bottom: 0; left: 0; max-width: 560px; opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
.hc .cap__step {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hcg); margin-bottom: 18px;
}

.hc .cap h3 { font-size: clamp(1.6rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1.25; letter-spacing: -.03em; color: var(--hc-fg); }
.hc .cap p { margin-top: 14px; font-size: clamp(.9rem, 1.1vw, 1.05rem); line-height: 1.7; color: var(--hc-fg2); max-width: 46ch; }

/* 피날레 : 궤도 입자의 중심에 문구 */
.hc .finale {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; text-align: center;
  padding: 0 24px;
  opacity: 0; transform: scale(.96);
  will-change: opacity, transform;
  pointer-events: none;
}
.hc .finale .f-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--hcg); margin-bottom: 22px; }
.hc .finale h3 { font-size: clamp(1.8rem, 4.2vw, 3.6rem); font-weight: 650; line-height: 1.24; letter-spacing: -.035em; color: var(--hc-fg); }
.hc .finale h3 b { color: var(--hcg); font-weight: inherit; }

/* 진행 레일 */
.hc .rail { position: absolute; right: clamp(20px, 4vw, 60px); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; justify-items: center; z-index: 4; }
.hc .rail i { width: 5px; height: 5px; border-radius: 50%; background: var(--hc-fg3); transition: background .3s, transform .3s; }
.hc .rail i.on { background: var(--hcg); transform: scale(1.5); }

/* 대화 콘솔 (비전 목업) */
.hc .telewrap {
  position: absolute;
  right: var(--edge);
  top: 50%;
  transform: translateY(-46%) translateX(40px);
  opacity: 0;
  will-change: opacity, transform;
  z-index: 2;
}
.hc .tele {
  width: min(400px, 88vw);
  border-radius: 20px;
  background: rgba(22, 29, 46, .66);
  border: 1px solid color-mix(in srgb, var(--hcg) 22%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 20px;
  box-shadow: 0 24px 80px -24px rgba(0, 0, 0, .8);
}
.hc .tele__head { display: flex; align-items: center; gap: 10px; }
.hc .tele__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--hcg); flex: none; animation: hc-pulse 1.6s ease-in-out infinite; }
@keyframes hc-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hcg) 50%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--hcg) 0%, transparent); } }
.hc .tele__name { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; color: var(--hc-fg2); }
.hc .tele__vision {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--hcg); border: 1px solid color-mix(in srgb, var(--hcg) 45%, transparent); border-radius: 999px; padding: 3px 9px;
}
.hc .dlg { margin-top: 18px; display: grid; gap: 16px; }
.hc .dlg__row { display: grid; gap: 7px; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.hc .dlg__row.on { opacity: 1; transform: none; }
.hc .dlg__who { font-size: 9.5px; font-weight: 700; letter-spacing: .2em; color: var(--hc-fg3); }
.hc .dlg__row--you { justify-items: end; text-align: right; }
.hc .dlg__row--ai .dlg__who { color: var(--hcg); }
.hc .dlg__text { font-size: 14px; line-height: 1.65; color: var(--hc-fg); }
.hc .dlg__row--ai .dlg__text { color: var(--hc-fg2); min-height: 3.2em; }
.hc .dlg__text .caret {
  display: inline-block; width: 7px; height: 1.05em;
  margin-left: 2px; vertical-align: -0.18em;
  background: var(--hcg);
  animation: hc-caret 0.9s steps(1) infinite;
}
@keyframes hc-caret { 50% { opacity: 0; } }
.hc .dlg__wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.hc .dlg__wave i {
  width: 3px; height: 18%;
  border-radius: 2px;
  background: var(--hcg);
  animation: hc-eq 0.8s ease-in-out infinite alternate;
}
@keyframes hc-eq { from { height: 12%; opacity: .4; } to { height: var(--h, 80%); opacity: .95; } }
.hc .dlg__wave.quiet i { animation-play-state: paused; height: 14%; opacity: .3; }
.hc .tele__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); font-size: 10.5px; letter-spacing: .06em; color: var(--hc-fg3); }

@media (max-width: 900px) {
  .hc .caps { bottom: 56px; }
  .hc .telewrap { right: var(--gutter); left: var(--gutter); top: max(100px, 12vh); transform: translateY(0) translateX(0); }  /* 플로팅 바(84px) 아래 */
  .hc .telewrap .tele { width: 100%; }
  .hc .rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hc .dlg__wave i, .hc .tele__pulse { animation: none; }
}

/* 섹션 공통 헤더 */
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 62ch; }
.sec-head .eyebrow { margin-bottom: 22px; }
.sec-head .lede { margin-top: 20px; max-width: 52ch; }

/* 실사 이미지 슬롯 : 원본 비율이 슬롯과 달라도 잘라서 채운다 */
img.biz__media, img.brand-card__media, img.news-card__media { width: 100%; }
img.biz__media, img.brand-card__media, img.news-card__media, img.hero__card-thumb { object-fit: cover; }

/* ============ 6. 솔루션 (브랜드 카드) ============ */

.brands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.brand-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.brand-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.brand-card__media {
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
}
.brand-card__body { padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; flex: 1; }
.brand-card__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.brand-card__title { margin-bottom: 14px; }
.brand-card__desc { font-size: var(--fs-sm); line-height: 1.75; color: var(--ink-3); margin-bottom: 22px; }
.brand-card__foot { margin-top: auto; }

/* ============ 8. 연혁 ============ */

.tl { border-bottom: 1px solid var(--line); }
.tl__row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  padding-block: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid var(--line);
}
.tl__year {
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  position: sticky;
  top: 120px;
  align-self: start;
}
.tl__row--recent .tl__year { color: var(--brand); }
.tl__entries li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding-block: 9px;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.tl__month { color: var(--ink-4); font-weight: 600; font-variant-numeric: tabular-nums; }
.tl__text { color: var(--ink-2); }

/* 홈은 최근 2개년만 보여준다. 2024 이전(data-archive)은 화면에서 숨기되
   DOM 에는 남긴다 - 회사소개 Milestones 가 이 목록을 단일 출처로 fetch 하기 때문 */
.tl__row[data-archive] { display: none; }
.tl__all { margin-top: 36px; }

/* ============ 9. 뉴스 ============ */

.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.news-card { display: flex; flex-direction: column; }
.news-card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  margin-bottom: 20px;
  transition: transform var(--dur) var(--ease-out);
}
.news-card:hover .news-card__media { transform: translateY(-4px); }
.news-card__date {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.news-card__title {
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card:hover .news-card__title { color: var(--brand); }
.news-card__sum {
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ 11. 푸터 ============ */

.footer {
  background: var(--surface-dark);
  color: var(--on-ink-3);
  padding-block: clamp(32px, 3.5vw, 44px);
  font-size: var(--fs-sm);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-bottom: clamp(24px, 2.5vw, 32px);
}
.footer__logo img { height: 24px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer__tagline {
  margin-top: 14px;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.03em;
  color: #fff;
}
.footer__links { display: flex; gap: clamp(32px, 4vw, 72px); }
.footer__col h4 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--on-ink-3);
  margin-bottom: 14px;
}
.footer__col li + li { margin-top: 8px; }
.footer__col a { color: var(--on-ink-2); transition: color var(--dur-fast) var(--ease); }
.footer__col a:hover { color: #fff; }

.footer__bottom {
  padding-top: 0;
  display: grid;
  gap: 4px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--on-ink-3);
}
.footer__bottom strong { color: var(--on-ink-2); font-weight: 600; }
.footer__addr { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer__addr span { white-space: nowrap; }
.footer__legal {
  margin-top: 12px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--on-ink-3);
}
.footer__legal a:hover { color: #fff; }
/* 법적 고지 줄 끝의 보조 언어 링크 : 왼쪽으로 밀어 구분 */
.footer__lang { margin-left: auto; }

/* ============================================================
   반응형
   ============================================================ */

@media (max-width: 1080px) {
  .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .tl__row { grid-template-columns: 1fr; }
  .tl__year { position: static; }

  .brands, .news-grid { grid-template-columns: 1fr; }
  .news__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  /* 주소 3건을 한 줄에 늘어놓는 배치는 좁은 화면에서 성립하지 않는다.
     특히 영문 주소는 한글보다 훨씬 길어 nowrap 이 걸리면 푸터 전체를 밀어낸다.
     한 건당 한 줄로 쌓고 줄바꿈을 허용한다 */
  .footer__addr { display: grid; gap: 4px; }
  .footer__addr span { white-space: normal; }
}

@media (max-width: 480px) {
  /* 좁은 폰(360px 대)에서 Sitemap·Family Site·Contact us 3열이
     줄바꿈 안 되는 텍스트(이메일·긴 브랜드명) 때문에 가로로 넘치는 문제.
     세로 스택으로 바꿔 원천 차단 */
  .footer__links { flex-direction: column; gap: 28px; }
}



/* ============================================================
   영문 전용 : 이미지 없는 뉴스 표현 (body.en-noimg)
   기사 대표 이미지가 한글이 인쇄된 PR 카드라 영문 페이지에서는 쓰지 않는다
   (대표 지시). 국문 body 에는 이 클래스가 없으므로 영향이 없다.
   ============================================================ */

/* 히어로 언론카드 : 썸네일 칸을 없애고 텍스트 한 칸으로 */
body.en-noimg .hero__card {
  grid-template-columns: minmax(0, 1fr);
  padding: 14px 16px;
  max-width: 420px;
}
body.en-noimg .hero__card-text { padding-left: 0; }

/* 뉴스 카드 : 이미지가 빠진 자리를 여백과 구분선으로 대신한다 */
body.en-noimg .news-card {
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease);
}
body.en-noimg .news-card:hover { border-color: var(--line-strong); }
body.en-noimg .news-card__date {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
body.en-noimg .news-card__title { font-size: 1.1875rem; line-height: 1.42; }

@media (max-width: 640px) {
  body.en-noimg .hero__card { max-width: none; }
  body.en-noimg .news-card { padding: 22px 20px; }
}

/* 영문 섹션 제목 : 같은 내용을 담는 영문 문장이 한글보다 길어
   62ch(591px) 안에서는 <br> 로 나눈 각 줄이 다시 접혀 5줄로 흐트러진다.
   영문 페이지에서만 측정 폭을 넓혀 의도한 줄 구성을 유지한다 */
html[lang="en"] .sec-head { max-width: 780px; }
html[lang="en"] .sec-head .lede { max-width: 60ch; }