/* ===== Hero (영상 1장 + 사진 2장이 돌아가는 슬라이드쇼) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: #0b1a10;
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 영상 1장 + 사진 2장이 8초마다 서로 크로스페이드되며 돌아갑니다
   (js/main.js initHeroSlides) */
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease);
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vw, 48px);
  z-index: 11;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
}

.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: background 0.2s var(--ease);
}

.hero__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.hero__dot.is-active {
  background: var(--c-white);
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0) 28%
  );
  pointer-events: none;
}

/* 로고와 태그라인을 히어로 한가운데(가로/세로 모두)에 둡니다 */
.hero__content {
  z-index: 11;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--c-white);
}

.hero__logo {
  /* 기존 clamp(450px, 51.43vw, 771px)에서 20% 추가 축소 */
  width: clamp(360px, 41.14vw, 617px);
  height: auto;
}

.hero__tagline {
  margin-top: 10px;
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 600;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

/* 현재 슬라이드(영상/화학구조/숲)에 맞는 구절만 굵고 크게 강조합니다
   (js/main.js의 initHeroSlides가 슬라이드 전환마다 is-active를 토글) */
.hero__tagline-part {
  display: inline-block;
  transition:
    font-weight 0.3s var(--ease),
    font-size 0.3s var(--ease);
}

.hero__tagline-part.is-active {
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 800;
}

/* 내용이 한 화면 안에 다 들어가는 섹션(hht, pipeline)은 높이를 화면 높이만큼
   확보해서, 이 섹션 맨 위로 스크롤했을 때 다음 섹션 내용이 아래쪽에 미리 보이지
   않게 합니다. pcai와 history-v2는 내용 길이가 들쭉날쭉해 빈 공간이 생기므로 제외합니다.
   blog도 justify-content가 flex-start로 바뀌면서 남는 공간이 전부 카드 아래로
   몰려 큰 빈 공간이 생기므로 제외합니다. */
.hht,
.pipeline {
  min-height: 100vh;
}

/* ===== 섹션 타이틀 첫 글자 뒤의 빛나는 점 (pcai 5단계 타임라인의 점과 같은 디자인) ===== */
.reveal-title {
  position: relative;
  z-index: 1;
}

.reveal-title::before {
  content: "";
  position: absolute;
  /* 원의 중심이 타이틀 글자 시작점(좌측 상단)에 오도록 원 크기의 절반만큼
     올려서, 원의 절반은 글자 뒤에 겹치고 절반은 바깥으로 보이게 합니다. */
  top: 0.15em;
  left: -0.125em;
  z-index: -1;
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  background: #377974cc;
  box-shadow:
    0 0 0 0.09em rgba(55, 121, 116, 0.15),
    0 0 0.3em 0.06em rgba(55, 121, 116, 0.85);
  animation: title-dot-glow 2.4s ease-in-out infinite;
  /* 타이틀 글자와 같은 타이밍에 나타나도록, 스크롤에 걸리기 전엔 숨겨 둡니다. */
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

.reveal-title.is-visible::before {
  opacity: 1;
}

@keyframes title-dot-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 0.09em rgba(55, 121, 116, 0.15),
      0 0 0.3em 0.06em rgba(55, 121, 116, 0.85);
  }
  50% {
    box-shadow:
      0 0 0 0.12em rgba(55, 121, 116, 0.22),
      0 0 0.45em 0.09em rgba(55, 121, 116, 1);
  }
}

/* ===== About ===== */
.about {
  padding: clamp(72px, 10.42vw, 150px);
}

.about .section-title + .section-desc {
  margin-top: 100px;
}

.about .section-desc + .section-desc {
  margin-top: 1em;
}

/* 위치 고정은 래퍼(wrap)가 맡고, 이미지 자신은 .reveal의 등장 애니메이션
   (opacity/transform)을 그대로 쓸 수 있도록 비워둡니다. 섹션 우측,
   세로 중앙에 장식으로 배치합니다 */
.about__right-wrap {
  position: absolute;
  right: clamp(24px, 6vw, 120px);
  top: 58%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* 1700px 이상 큰 화면에서는 헤더의 Blog 글자 위치까지 왼쪽으로 당깁니다
   (1920px 기준으로 맞춤) */
@media (min-width: 1700px) {
  .about__right-wrap {
    right: clamp(180px, 13.2vw, 260px);
  }
}

.about__right-img {
  width: clamp(240px, 22vw, 360px);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

@media (max-width: 900px) {
  .about__right-wrap {
    display: none;
  }
}

/* technology 페이지 .service-intro strong과 같은 처리 */
.about strong {
  font-weight: 800;
  color: #26534f;
}

/* ===== PCAI ===== */
.pcai {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(72px, 10.42vw, 150px);
}

.pcai__title {
  font-size: var(--fs-title);
  font-weight: 650;
  line-height: 1.3;
  color: #000;
}

.pcai__intro-row {
  display: flex;
}

.pcai__intro-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pcai__intro-text .blog__more {
  margin-top: 1.6em;
}

.pcai__sub {
  margin-top: 30px;
  font-size: clamp(20px, 1.67vw, 20px);
  /* technology 페이지 .service-intro strong과 같은 두께·색 */
  font-weight: 600;
  color: #377974;
}

/* ===== PCAI 5단계 과정: 가로선 하나에 5개의 점이 같은 간격으로 놓이고,
   점 위엔 단계 사진, 점 밑엔 설명이 붙는 타임라인 ===== */
.pcai__flow {
  margin-top: 100px;
  padding: 0 3%;
}

.pcai__timeline {
  position: relative;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 선은 카드 폭이 아니라 화면 폭 전체로 뻗어야 해서, 뷰포트 기준으로 좌우
   끝까지 벌리는 방식(50vw 트릭)을 씁니다. 세로 위치는 아이콘 높이 +
   점 줄까지의 여백으로 계산해서 점의 정중앙에 맞춥니다. */
.pcai__timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  top: calc(clamp(72px, 9vw, 129px) + 43.25px);
  height: 2px;
  background: #377974;
}

.pcai__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pcai__icon {
  /* 기존 크기의 75% */
  /* aspect-ratio만 쓰면 안의 img(height:100%)가 자기 원본 비율로 높이를
     끌어올려서 칸마다 높이가 제각각이 되는 문제가 있어, height를 직접
     같은 값으로 고정합니다 */
  width: clamp(72px, 9vw, 129px);
  height: clamp(72px, 9vw, 129px);
}

.pcai__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 사진마다 원본 비율이 달라도 전부 아래쪽 기준으로 맞춰, 바로 아래 원·선과
     사진 사이 간격이 모든 칸에서 똑같아 보이도록 합니다 */
  object-position: center bottom;
}

.pcai__dot-row {
  display: block;
  width: 100%;
  margin: 38px 0;
}

.pcai__dot {
  position: relative;
  z-index: 1;
  display: block;
  /* 기존 크기의 75% */
  width: 10.5px;
  height: 10.5px;
  margin: 0 auto;
  border-radius: 50%;
  background: #377974;
  box-shadow:
    0 0 0 3.75px rgba(55, 121, 116, 0.15),
    0 0 12px 1.5px rgba(55, 121, 116, 0.8);
  animation: pcai-dot-glow 2.4s ease-in-out infinite;
}

.pcai__step:nth-child(2) .pcai__dot {
  animation-delay: 0.15s;
}
.pcai__step:nth-child(3) .pcai__dot {
  animation-delay: 0.3s;
}
.pcai__step:nth-child(4) .pcai__dot {
  animation-delay: 0.45s;
}
.pcai__step:nth-child(5) .pcai__dot {
  animation-delay: 0.6s;
}

@keyframes pcai-dot-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 3.75px rgba(55, 121, 116, 0.15),
      0 0 12px 1.5px rgba(55, 121, 116, 0.8);
  }
  50% {
    box-shadow:
      0 0 0 5.25px rgba(55, 121, 116, 0.22),
      0 0 18px 3.75px rgba(55, 121, 116, 1);
  }
}

.pcai__step-label {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--c-ink);
}

/* ===== HHT ===== */
.hht {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding: clamp(72px, 10.42vw, 150px);
}

.hht__title {
  position: relative;
  z-index: 1;
  font-size: var(--fs-title);
  font-weight: 650;
  line-height: 1.3;
  color: #000;
}

.hht__body {
  position: relative;
  z-index: 1;
  margin-top: 100px;
  /* 첫 문단이 "~있으며," 뒤 <br>에서 한 줄로 끊기기에 충분한 폭. 첫 문단은
     원 클러스터가 시작되는 높이보다 위에서 끝나서 이만큼 넓어도 겹치지
     않습니다. 두 번째 문단·링크는 원과 겹치는 높이라 아래에서 따로
     좁힙니다 */
  max-width: 780px;
}

.hht__body p + p {
  margin-top: 1.6em;
}

/* 화면폭 901~1699px 구간에서만 쓰는 추가 줄바꿈. 이 구간은 원 클러스터가
   아직 충분히 오른쪽으로 밀리지 않아 글과 거의 맞닿아 보여서, 그 구간만
   한 번 더 끊어 원과 조금 더 떨어지게 합니다 */
.hht__br--mid {
  display: none;
}

@media (min-width: 901px) and (max-width: 1699px) {
  .hht__br--mid {
    display: block;
  }
}

.hht__body .blog__more {
  margin-top: 1.6em;
}

.hht__body strong {
  font-weight: 600;
  color: var(--c-green);
}

/* biofdnc.com의 About 섹션처럼, 큰 원 하나 + 작은 원 두 개로 구성한 사진
   클러스터. 큰 원은 우측 하단에 앵커로 두고, 작은 원 두 개가 왼쪽 위/아래로
   겹치며 걸립니다. */
/* 작은 원들이 큰 원 자리를 기준으로 겹치도록, 전체를 큰 원 크기만큼의
   정사각 컨테이너로 두고 작은 원은 그 안에서 %로 위치를 잡습니다.
   (텍스트 폭과 상관없이 원이 커져도 전체 폭은 큰 원 크기로 고정됩니다) */
.hht__circles {
  position: absolute;
  right: clamp(120px, 12.2vw, 340px);
  /* 타이틀과 겹치지 않는 선까지 최대한 올립니다 */
  bottom: clamp(250px, calc(14vw + 100px), 350px);
  /* 가장 큰 원(= 이 컨테이너 크기) 기준 85% */
  width: clamp(280px, 25.5vw, 408px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

/* 원 뒤의 은은한 뒷조명. 헤더 색을 옅게 써서 큰 원보다 살짝 작은 크기로
   깔아두고 blur로 퍼뜨려, 큰 원 테두리 주변으로만 잔잔하게 비칩니다 */
.hht__circles::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(55, 121, 116, 0.45) 0%,
    rgba(55, 121, 116, 0.2) 50%,
    rgba(55, 121, 116, 0) 72%
  );
  filter: blur(36px);
  z-index: 0;
}

/* 1440~1466px 구간 보정은 위 clamp 그대로 두고, 1700px 이상 큰 화면에서만
   더 왼쪽으로 당깁니다 (1920px 기준으로 맞춤) */
@media (min-width: 1700px) {
  .hht__circles {
    right: clamp(115px, 13vw, 265px);
  }
}

.hht__circle {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hht__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 사진이 바뀔 때 부드럽게 전환됩니다 (js/main.js에서 opacity를 토글) */
  transition: opacity 0.5s var(--ease);
}

/* hht3(캘러스 페트리접시 사진)는 원형으로 미리 잘려 있어 살짝 더
   확대해서 흰 여백이 덜 보이도록 합니다 */
.hht__circle img[src*="hht3"] {
  transform: scale(1.15);
}

.hht__circle--big {
  inset: 0;
  z-index: 2;
}

/* 큰 원 양옆 아래쪽에서 겹치도록 배치. 작은 원은 옅게 처리해 큰 원 사진에
   시선이 먼저 가도록 합니다 */
.hht__circle--small {
  /* 큰 원의 48%(= 기존 1.3배 크기와 비슷한 비율) */
  width: 48%;
  aspect-ratio: 1 / 1;
  bottom: -8%;
  z-index: 1;
  opacity: 0.45;
}

.hht__circle--a {
  left: -22%;
}

.hht__circle--b {
  right: -22%;
}

/* ===== Pipeline (참고 디자인 "03 · Responsible Pathway" 스타일을 따릅니다) ===== */
.pipeline {
  background: var(--c-deep);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(72px, 10.42vw, 150px);
}

.pipeline__eyebrow {
  margin: 0;
  font-size: clamp(10px, 0.83vw, 12px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-lime);
}

.pipeline__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: end;
  gap: clamp(24px, 4vw, 80px);
  text-align: left;
}

.pipeline__head .section-title {
  margin-top: 14px;
  color: var(--c-white);
}

.pipeline__head .section-desc {
  max-width: 100%;
  margin-top: 0;
  /* 이 칸은 그리드 비율상 title보다 좁아서(0.75fr) 공용 --fs-desc-sm보다
     더 빠르게, 더 낮은 바닥까지 줄어들어야 폭이 조금만 줄어도 줄바꿈이
     늘어나는 걸 막을 수 있습니다. */
  font-size: clamp(10px, 0.96vw, 20px);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.64);
  text-align: right;
  word-break: keep-all;
}

/* 950px 부근은 폰트를 더 줄여도 줄바꿈을 못 피해서, 공용 900px 전환점보다
   살짝 먼저 1단으로 바꿔 그 구간을 건너뜁니다. */
@media (max-width: 950px) {
  .pipeline__head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* h2(.section-title)와 같은 크기·굵기 */
/* h3(.pipeline-step h3)와 같은 크기·굵기 */
.pipeline__caption {
  margin-top: 100px;
  /* 1440px 기준 33px, 화면이 좁아지면 비례해서 줄어듭니다 */
  font-size: clamp(23px, 2.29vw, 33px);
  font-weight: 700;
  color: var(--c-white);
}

.pipeline__caption + .pipeline__steps {
  margin-top: 50px;
}

.pipeline__plants + .pipeline__caption {
  margin-top: 150px;
}

/* 위 pipeline-step의 h3(건강기능식품 소재 등)와 같은 취급 */
.pipeline__expand-title {
  margin-top: 20px;
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 700;
  color: var(--c-white);
}

.pipeline__expand-desc {
  margin-top: 16px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  word-break: keep-all;
}

/* pipe1~3 사진 + 바로 옆 설명 공간. 원본 사진은 3:4라서 1:1로 crop해서
   보여주고, 옆 칸도 같은 1:1 크기로 비워 둡니다(설명글은 나중에 작성). */
/* 모바일에서만 화살표로 하나씩 넘겨보는 캐러셀이 되므로, 화살표를 배치할
   기준(position:relative)이 필요합니다. 데스크톱에서는 3개가 그대로
   나란히 보이고 화살표는 숨겨둡니다(.pipeline__plant-arrow 참고) */
.pipeline__plants-carousel {
  position: relative;
}

/* 사진+빈공간 짝 3개를 한 행에 나란히 배치합니다. 각 칸은 flex:1이라
   화면 폭에 맞춰 같이 줄고 늘고, 정사각형은 aspect-ratio로 유지됩니다
   (고정 px 없이 완전히 유동적) */
.pipeline__plants {
  margin-top: 60px;
  display: flex;
  gap: 24px;
}

/* 뉴스 캐러셀의 화살표(.blog__arrow)와 같은 디자인. 데스크톱에서는
   3개가 이미 다 보이므로 화살표가 필요 없어 기본은 숨겨둡니다 */
.pipeline__plant-arrow {
  display: none;
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  place-items: center;
  translate: 0 -50%;
  color: var(--c-white);
}

.pipeline__plant-arrow svg {
  width: 26px;
  height: 26px;
}

.pipeline__plant-arrow--prev {
  left: 0;
}
.pipeline__plant-arrow--next {
  right: 0;
}

/* 사진+빈 블록을 합친 전체가 가로:세로 2:1이 되도록 블록 자체에
   aspect-ratio를 줍니다. (각 반쪽에 padding-top:100%를 썼더니, 그 %가
   자기 폭이 아니라 부모 전체 폭 기준으로 계산되는 바람에 반쪽마다 부모
   폭만큼의 높이가 생겨 전체가 2:1이 아니라 1:1이 되는 문제가 있었습니다.) */
.pipeline__plant {
  flex: 1;
  min-width: 0;
  /* 치자 칸 설명글이 2/1 비율에선 살짝 넘쳐 잘렸던 걸, 세 칸 모두 같은
     비율은 유지한 채 약간 더 높여서 여유를 줍니다. 그래도 화면폭
     900~1250px 구간은 글자 크기가 이미 최솟값이라 비율만으로는 부족해서,
     그 구간만 떠받치도록 min-height를 같이 둡니다(세 칸 모두 이 클래스를
     공유하므로 높이는 항상 똑같이 유지됩니다). */
  aspect-ratio: 16 / 9;
  min-height: 220px;
  display: flex;
  overflow: hidden;
}

/* 글 길이와 무관하게 칸 높이가 항상 .pipeline__plant 높이와 같도록
   100%로 고정하고, 넘치는 내용은 overflow:hidden으로 가립니다 */
.pipeline__plant-img,
.pipeline__plant-text {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.pipeline__plant-img {
  /* 사진+빈 블록을 하나의 직사각형으로 보고, 바깥쪽(왼쪽) 모서리만 둥글게 */
  border-radius: 16px 0 0 16px;
}

.pipeline__plant-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pipeline__plant-text {
  background: rgba(255, 255, 255, 0.06);
  /* 바깥쪽(오른쪽) 모서리만 둥글게 */
  border-radius: 0 16px 16px 0;
}

.pipeline__plant-text__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(16px, 2vw, 28px);
}

/* pipeline__expand-desc(설명글)와 같은 크기 */
.pipeline__plant-text p {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.pipeline__plant-text p + p {
  margin-top: 6px;
}

.pipeline__plant-latin {
  font-style: italic;
}

.pipeline__plant-text strong {
  font-weight: 700;
  color: var(--c-white);
}

.pipeline__steps {
  position: relative;
  margin-top: 150px;
  padding-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pipeline__steps::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgb(140 192 189 / 80%);
}

/* 3단계 중 지금 단계(1단계=화장품 소재)를 라임 바로 표시.
   history의 점선 경로처럼, 스크롤로 .pipeline__steps가 보이는 순간 폭이 0에서
   33.33%까지 자라면서 그려지는 것처럼 보이게 합니다. 끝의 동그라미(::after)는
   width 기준으로 위치가 정해져 있어서, 막대가 자라는 동안 끝을 따라 같이 이동합니다. */
.pipeline__progress {
  position: absolute;
  top: -3px;
  left: 0;
  width: 0;
  height: 7px;
  background: var(--c-lime);
  transition: width 1.1s var(--ease);
}

.pipeline__steps.is-visible .pipeline__progress {
  width: 33.33%;
}

.pipeline__progress::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c-lime);
  box-shadow: 0 0 0 8px rgb(219 231 158 / 0.12);
}

/* grid 행이 가장 긴 칸(원료의약품 API, 글이 제일 길어 태그가 제일 아래로
   밀림) 높이에 맞춰 3칸 모두 같은 높이로 늘어나므로(grid 기본 동작),
   각 칸을 flex column으로 만들고 태그에 margin-top:auto를 줘서 태그가
   화면 크기와 상관없이 항상 그 늘어난 칸의 맨 아래, 즉 같은 줄에 오게 합니다. */
.pipeline-step {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  padding-right: clamp(20px, 2.5vw, 38px);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
}

.pipeline-step + .pipeline-step {
  padding-left: clamp(20px, 2.5vw, 38px);
}

.pipeline-step:last-child {
  border-right: 0;
}

.pipeline-step__phase {
  font-size: clamp(9px, 0.76vw, 11px);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--c-lime);
}

.pipeline-step h3 {
  margin-top: clamp(20px, 2vw, 35px);
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 700;
  color: var(--c-white);
}

.pipeline-step p {
  margin-top: clamp(12px, 1.4vw, 17px);
  min-height: 90px;
  font-size: var(--fs-desc-sm);
  line-height: 1.85;
  word-break: keep-all;
  color: rgba(255, 255, 255, 0.62);
}

.pipeline-step__tag {
  display: block;
  /* flex column 맨 아래로 밀어서 3칸의 태그 줄을 맞춥니다 */
  margin-top: auto;
  padding-top: clamp(16px, 2vw, 28px);
  font-size: clamp(9px, 0.76vw, 11px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86);
}

/* ===== Blog ===== */
.blog {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(72px, 10.42vw, 150px);
}

/* 파이프라인(어두운 배경)을 제외한 index 페이지 섹션 타이틀은 검정색으로 통일 */
.blog .section-title {
  color: #000;
}

.blog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.blog__head .section-desc {
  margin-top: 30px;
  line-height: 1.6;
}

.blog__more {
  display: inline-block;
  font-size: clamp(18px, 1.7vw, 22px);
  /* 푸터와 같은 색 */
  color: #1c3d3a;
  transition:
    transform 0.2s var(--ease),
    filter 0.2s var(--ease);
}

/* .reveal.is-visible{transform:none}와의 명시도 동률 문제를 피하려고
   .is-visible:hover 조합도 같이 명시해둡니다 (자세한 이유는 common.css 참고) */
.blog__more:hover,
.blog__more.is-visible:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  font-weight: 500;
}

.blog__carousel {
  position: relative;
  margin-top: 150px;
  padding: 0 clamp(36px, 5vw, 80px);
}

.blog__track {
  display: flex;
  gap: clamp(16px, 2.5vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.blog__track::-webkit-scrollbar {
  display: none;
}

/* 모바일에서 카드를 한 화면에 한 장씩 보여주면서도 카드 자체는 70% 크기로
   줄이기 위한 래퍼. 데스크톱에서는 display:contents로 레이아웃에서
   사라지고, .blog-card가 평소처럼 .blog__track의 flex 자식이 됩니다 */
.blog-card-slide {
  display: contents;
}

.blog-card {
  position: relative;
  flex: 0 0 calc((100% - 3 * clamp(16px, 2.5vw, 40px)) / 4);
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  color: var(--c-ink);
}

.blog-card img {
  position: absolute;
  inset: 8% 0 6% 0;
  width: 100%;
  height: 86%;
  object-fit: cover;
}

.blog-card__title {
  position: relative;
  padding: 0 0 0 clamp(12px, 3vw, 48px);
  font-size: clamp(16px, 1.55vw, 22px);
  font-weight: 700;
  line-height: 1.45;
}

.blog-card__date {
  position: absolute;
  right: clamp(12px, 3vw, 48px);
  bottom: 0;
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 700;
}

.blog__arrow {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  translate: 0 -50%;
  color: var(--c-ink);
}

.blog__arrow svg {
  width: 26px;
  height: 26px;
}

.blog__arrow--prev {
  left: 0;
}
.blog__arrow--next {
  right: 0;
}

/* ===== History (새 디자인: 연도별 2열 타임라인) =====
   팔레트는 사이트 메인 포인트 컬러(#377974)와 민트(--c-mint)를 그대로
   씁니다. 아래 "예전 History" 블록은 HTML에서 주석 처리된 뒤로는 쓰이지
   않지만, 되돌릴 수 있도록 남겨둡니다. */
/* 마지막 섹션이라 .section의 기본 하단 패딩(0)만으로는 푸터와 바로
   붙어버려서, 위쪽과 같은 값으로 아래 여백을 직접 줍니다. */
.history-v2 {
  padding: clamp(72px, 10.42vw, 150px);
}

/* 파이프라인을 제외한 index 페이지 섹션 타이틀은 검정색으로 통일 */
.history-v2 .section-title {
  color: #000;
}

.history__head {
  margin-top: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.history__head .section-desc {
  margin-top: 0;
}

.history__contact {
  flex-shrink: 0;
}

.history-timeline {
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 6vw, 96px);
}

.history-timeline__label {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 800;
  color: #377974;
}

.history-timeline__list {
  position: relative;
  margin-top: clamp(24px, 2.8vw, 36px);
  padding-left: 28px;
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}

/* 항목들을 잇는 세로선 */
.history-timeline__list::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(55, 121, 116, 0.18);
}

.history-timeline__list li {
  position: relative;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-ink);
}

/* 세로선 위에 찍히는 점 */
.history-timeline__list li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #377974;
  box-shadow: 0 0 0 4px rgba(55, 121, 116, 0.15);
}

.history-timeline__month {
  display: inline-block;
  min-width: 2.8em;
  font-weight: 700;
  color: #377974;
}

/* 2025(첫 번째 연도)만 포인트 컬러 대신 푸터 배경색을 씁니다.
   검정 글씨(본문)는 그대로 두고, 색이 들어간 부분(연도·월·점·선)만 바꿉니다. */
.history-timeline__year:first-child .history-timeline__label,
.history-timeline__year:first-child .history-timeline__month {
  color: #1c3d3a;
}

.history-timeline__year:first-child .history-timeline__list::before {
  background: rgba(28, 61, 58, 0.18);
}

.history-timeline__year:first-child .history-timeline__list li::before {
  background: #1c3d3a;
  box-shadow: 0 0 0 4px rgba(28, 61, 58, 0.15);
}

@media (max-width: 900px) {
  .history-timeline {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline__progress {
    width: 33.33%;
    transition: none;
  }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .section-title,
  .pcai__title,
  .hht__title,
  .pipeline__caption,
  .pipeline__expand-title,
  .history-timeline__label {
    font-size: 21px;
  }

  .pcai__sub {
    font-size: 17px;
  }

  /* 모바일에서는 섹션 타이틀의 왼→오 글자 등장 효과 없이 바로 보이게 합니다 */
  .reveal-title .char {
    opacity: 1;
    transform: none;
  }
  .reveal-title.is-visible .char {
    animation: none;
  }

  .pcai__intro-row {
    flex-direction: column;
  }

  /* 5개를 한 줄에 다 넣으면 너무 빡빡해서, 3개+2개로 두 줄에 나눠 담습니다.
     2개짜리 줄은 가운데로 오도록 중앙 정렬합니다 */
  .pcai__timeline {
    flex-wrap: wrap;
    row-gap: 36px;
    justify-content: center;
  }

  .pcai__step {
    flex: 0 0 33.333%;
    min-width: 0;
  }

  /* 2개짜리 아랫줄은 라벨끼리 너무 붙어서 겹쳐 보이므로, 폭을 줄이고
     둘 사이에 간격을 띄웁니다. 간격을 px 고정값이 아니라 %(타임라인 폭
     기준)로 둬서, 화면 폭이 바뀌어도 두 칸의 폭:간격 비율이 항상 똑같이
     유지되도록 합니다 */
  .pcai__step:nth-child(4),
  .pcai__step:nth-child(5) {
    flex: 0 0 28%;
  }
  .pcai__step:nth-child(4) {
    margin-right: 14.34%;
  }

  .pcai__icon {
    width: 56px;
    height: 56px;
  }

  .pcai__step-label {
    font-size: 13px;
    /* .pcai__step이 align-items:center라 라벨이 내용 너비만큼 넓어져
       부모 칸 폭을 무시하고 있었습니다. width:100%로 칸 폭에 맞추고,
       METABOLITES·APPLICATIONS처럼 긴 단어는 중간에서도 줄바꿈되게 합니다 */
    width: 100%;
    overflow-wrap: break-word;
  }

  /* 줄이 두 개로 나뉘면서 가로로 쭉 뻗던 기존 연결선 대신, 각 줄의 점들을
     잇는 선을 줄마다 따로 둡니다 */
  .pcai__timeline::before {
    left: 16.66%;
    width: 66.67%;
    margin-left: 0;
    top: 99px;
  }

  /* 아랫줄 선은 타임라인 전체 기준 고정 좌표(top: px) 대신, 자기 줄의
     점(dot-row) 기준 상대 위치로 둡니다. 윗줄 라벨이 좁은 화면에서 줄바꿈이
     늘어나 아랫줄 전체가 밀려 내려가도, 선이 자기 줄을 그대로 따라가며
     항상 점을 정확히 지나가게 하기 위해서입니다 */
  .pcai__timeline::after {
    display: none;
  }

  .pcai__step:nth-child(4) .pcai__dot-row {
    position: relative;
  }

  .pcai__step:nth-child(4) .pcai__dot-row::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 151.2%;
    height: 2px;
    background: #377974;
    transform: translateY(-50%);
  }

  .hht {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  /* 설명글과 Contact 버튼이 한 줄에 나란히 있으면 좁은 화면에서 비좁아
     보여서, 버튼을 설명글 아래로 내립니다 */
  .history__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .history__contact {
    margin-top: 8px;
  }

  .hht__circles {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(220px, 60vw);
    margin: 32px auto 0;
  }

  /* 큰 화면 전용으로 넣어둔 수동 줄바꿈을 꺼서, 좁은 화면에서는 문장이
     화면 폭에 맞게 자연스럽게 줄바꿈되도록 합니다 */
  .hht__body br {
    display: none;
  }

  .pipeline__head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pipeline__steps {
    grid-template-columns: 1fr;
  }
  /* 3개를 세로로 쌓는 대신, 뉴스 캐러셀처럼 화살표로 하나씩 넘겨보게 합니다 */
  .pipeline__plants-carousel {
    padding: 0 clamp(36px, 10vw, 60px);
    margin-top: 50px;
  }
  .pipeline__plant-arrow {
    display: grid;
  }
  .pipeline__plants {
    margin-top: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pipeline__plants::-webkit-scrollbar {
    display: none;
  }
  .pipeline__plant {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* 캐러셀로 넘길 때마다 카드가 처음 뷰포트에 걸치는 걸로 인식돼
     위에서 내려오는 reveal 효과가 매번 다시 실행되므로, 모바일에서는
     이 카드들만 reveal 효과 없이 바로 보이게 합니다 */
  .pipeline__plant.reveal {
    opacity: 1;
    transform: none;
  }
  .pipeline__steps::before,
  .pipeline__progress {
    display: none;
  }
  .pipeline__steps {
    padding-top: 0;
    gap: 0;
  }
  .pipeline-step,
  .pipeline-step + .pipeline-step {
    min-height: 0;
    padding: 28px 0;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.17);
  }
  .pipeline-step p {
    min-height: 0;
  }

  /* 슬라이드(래퍼)가 화면 하나를 그대로 차지해 한 장씩만 보이게 하고,
     그 안에서 실제 카드는 70% 크기로 가운데에 놓입니다 */
  .blog__track {
    gap: 0;
  }
  .blog-card-slide {
    display: block;
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  .blog-card {
    display: block;
    width: 70%;
    margin: 0 auto;
  }

  /* 모바일에서는 섹션마다 위쪽 패딩을 빼고, 좌우는 15px만 남기고,
     아래쪽 패딩만 그대로 둡니다 (섹션 간 간격은 이 아래쪽 패딩으로 확보) */
  .about,
  .pcai,
  .hht,
  .pipeline,
  .blog,
  .history-v2 {
    padding-top: 0;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* about/pipeline/news 섹션만 위쪽 패딩을 아래쪽과 같은 값으로 되돌립니다 */
  .about,
  .pipeline,
  .blog {
    padding-top: clamp(72px, 10.42vw, 150px);
  }

  .about .section-title + .section-desc {
    margin-top: 50px;
  }

  .pipeline__caption {
    margin-top: 50px;
  }

  .pipeline__plants + .pipeline__caption {
    margin-top: 50px;
  }

  .blog__carousel {
    margin-top: 50px;
  }

  .history-timeline {
    margin-top: 50px;
  }

  .hht__body {
    margin-top: 50px;
  }

}