/* technology-peptardel.css */
/* Figma: 1920×7442 | Node 3944:13335 (3-2. Technology > Peptardel) */

/* ========== 01-header ========== */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 25rem;
  padding: 0 clamp(1.25rem, 16.67vw, 20rem) 2.5rem;
  background-color: #ffffff;
  box-sizing: border-box;
}

.page-header__inner {
  width: 100%;
  max-width: 80rem;
}

.page-header__content {
  display: flex;
  align-items: center;
  gap: 2.1875rem;
  padding: 0.375rem 0;
}

.page-header__accent {
  width: 0.625rem;
  align-self: stretch;
  background-color: var(--logogreen);
  flex-shrink: 0;
}

.page-header__title {
  font-family: var(--font-paperlogy);
  font-size: clamp(1.75rem, 3.125vw, 3.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--logogreen);
  margin: 0;
  word-break: keep-all;
}

@media (max-width: 1199px) {
  .page-header { height: auto; min-height: 15rem; }
}

@media (max-width: 767px) {
  .page-header__content { gap: 1rem; }
  .page-header__accent { width: 0.375rem; }
}

/* ========== 02-navbar-index ========== */
.navbar-index {
  width: 100%;
  padding: 1.875rem clamp(1.25rem, 16.67vw, 20rem) 0;
  background-color: #ffffff;
  box-sizing: border-box;
}

.navbar-index__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.navbar-index__link {
  font-family: var(--font-poppins);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.042vw, 1.25rem);
  line-height: 2.625rem;
  color: rgba(0, 0, 0, 0.7);
}

.navbar-index__link--active {
  font-weight: 600;
}

/* ========== 03-platform-overview (3 cards) ========== */
/* Figma: bg #F6F5F2, pad TB:150, gap:80, center */

.platform-overview {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--lightgray);
}

.platform-overview__inner {
  width: 100%;
  max-width: 120rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4.17vw, 5rem); /* 80px */
  padding: clamp(3rem, 7.81vw, 9.375rem) 0;
}

.platform-overview__header {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 0 clamp(1.25rem, 16.67vw, 20rem); /* 320px */
  width: 100%;
  box-sizing: border-box;
}

.platform-overview__title {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.1875vw, 2.625rem);
  line-height: 1.3;
  color: var(--darkgreen);
  margin: 0;
}

.platform-overview__desc {
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: clamp(1rem, 1.042vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--darkgreen);
  margin: 0;
}

/* 3 cards — Figma: pad LR:110, gap:42, each card 398×650 */
.platform-cards {
  display: flex;
  gap: 2.625rem; /* 42px */
  justify-content: center;
  padding: 0 clamp(1.25rem, 5.73vw, 6.875rem); /* 110px */
  width: 100%;
  box-sizing: border-box;
}

.platform-card {
  width: 24.875rem; /* 398px */
  background-color: var(--logogreen);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 1;
  min-width: 0;
}

/* Figma: 398×378 image area */
.platform-card__image {
  width: 100%;
  height: 23.625rem; /* 378px */
  overflow: hidden;
  flex-shrink: 0;
}

.platform-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma: 398×272, pad 40 42, gap 12 */
.platform-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem; /* 12px */
  padding: 2.5rem 2.625rem; /* 40px 42px */
  text-align: center;
  flex: 1;
}

/* Figma: Paperlogy Bold 34px, white */
.platform-card__title {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.771vw, 2.125rem); /* 34px */
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
}

/* Figma: Pretendard SemiBold 22px, #f8f2e2 */
.platform-card__text {
  font-family: var(--font-pretendard);
  font-weight: 600;
  font-size: clamp(1rem, 1.146vw, 1.375rem); /* 22px */
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #f9f3e3;
  margin: 0;
}

/* Tablet: cards shrink naturally */
@media (max-width: 1199px) {
  .platform-card {
    width: auto;
    flex: 1;
  }

  .platform-card__image {
    height: auto;
    aspect-ratio: 398 / 378;
  }
}

/* Mobile: stack cards */
@media (max-width: 767px) {
  .platform-cards {
    flex-direction: column;
    align-items: center;
  }

  .platform-card {
    width: 100%;
    max-width: 24.875rem;
    flex: none;
  }
}

/* ========== 04-peptardel-t ========== */
/* Figma: pad LR:320, gap:150 between sub-sections */

.peptardel-t-section {
  width: 100%;
  background-color: #ffffff;
}

.peptardel-t-section__inner {
  width: 100%;
  padding: 0 clamp(1.25rem, 16.67vw, 20rem);
  box-sizing: border-box;
}

.peptardel-t-section__header {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: clamp(3rem, 7.81vw, 9.375rem); /* 150px */
}

.peptardel-t-section__title {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.083vw, 2.5rem); /* 40px */
  line-height: 1.3;
  color: var(--darkgreen);
  margin: 0;
}

.peptardel-t-section__subtitle {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.771vw, 2.125rem); /* 34px */
  line-height: 1.3;
  color: var(--logogreen);
  margin: 0;
}

.peptardel-t-section__desc-bold {
  font-family: var(--font-pretendard);
  font-weight: 700;
  font-size: clamp(1rem, 1.146vw, 1.375rem); /* 22px at 1920 */
  line-height: 1.4; /* 140% */
  letter-spacing: -0.02em; /* -0.44px */
  color: var(--darkgreen, #14483C);
  text-transform: capitalize;
  margin: 0;
}

.peptardel-t-section__desc {
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.042vw, 1.25rem); /* 20px at 1920 */
  line-height: 1.6; /* 160% */
  letter-spacing: -0.02em; /* -0.4px */
  color: var(--darkgreen, #14483C);
  text-transform: capitalize;
  margin: 0;
}

/* TB3 Sub-header */
.peptardel-tb3-header {
  margin-top: clamp(3rem, 7.81vw, 9.375rem); /* 150px */
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

.peptardel-tb3-header__title {
  font-family: var(--font-pretendard);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.5625vw, 1.875rem); /* 30px */
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #273c35;
  margin: 0;
}

.peptardel-tb3-header__subtitle {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.771vw, 2.125rem);
  line-height: 1.3;
  color: var(--logogreen);
  margin: 0;
}

.peptardel-tb3-header__desc {
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.042vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--darkgreen);
  margin: 0;
}

/* TB3 Infographic */
.peptardel-tb3-infographic {
  margin-top: clamp(3rem, 7.81vw, 9.375rem);
}

.peptardel-tb3-infographic__title {
  font-family: var(--font-pretendard);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.5625vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #273c35;
  margin: 0 0 0.75rem;
}

.peptardel-tb3-infographic__diagram {
  width: 100%;
  max-width: 80rem;
}

.peptardel-tb3-infographic__diagram img {
  width: 100%;
  height: auto;
  display: block;
}

/* Organ Delivery */
.peptardel-organ-delivery {
  margin-top: clamp(3rem, 7.81vw, 9.375rem);
}

.peptardel-organ-delivery__title {
  font-family: var(--font-pretendard);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.5625vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--darkgreen);
  margin: 0 0 1.875rem;
}

.peptardel-organ-delivery__grid {
  max-width: 80rem;
}

.peptardel-organ-delivery__grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile: diagram scroll */
@media (max-width: 767px) {
  .peptardel-tb3-infographic__diagram {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .peptardel-tb3-infographic__diagram img {
    min-width: 50rem;
  }
}

/* ========== 05-peptardel-s ========== */
/* Figma: 1920×1184, pad TB:150, gap:80, diagrams 626+590 side-by-side */

.peptardel-s-section {
  width: 100%;
  background-color: var(--lightgray); /* Figma: lightgray */
}

.peptardel-s-section__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4.17vw, 5rem); /* 80px */
  padding: clamp(3rem, 7.81vw, 9.375rem) clamp(1.25rem, 16.67vw, 20rem);
  box-sizing: border-box;
}

.peptardel-s-section__header {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.peptardel-s-section__title {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.083vw, 2.5rem);
  line-height: 1.3;
  color: var(--darkgreen);
  margin: 0;
}

.peptardel-s-section__desc,
.peptardel-s-section__desc-detail {
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.042vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--darkgreen);
  margin: 0;
}

/* Figma: 2 diagrams side-by-side (626+60gap+590 = 1276), pad LR:320 */
.peptardel-s-section__diagram {
  width: 100%;
  max-width: 80rem; /* 1280px */
  display: flex;
  gap: 3.75rem; /* 60px */
  align-items: center;
}

.peptardel-s-diagram-img {
  flex: 1;
  min-width: 0;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .peptardel-s-section__diagram {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.peptardel-s-section__footer-text {
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.042vw, 1.25rem);
  line-height: 1.6;
  color: var(--darkgreen);
  margin: 0;
}

/* ========== 06-peptardel-o ========== */
/* Figma: 1920×1119, pad B:150, gap:80, diagram 1280×700 (398+882) */

.peptardel-o-section {
  width: 100%;
  background-color: #ffffff;
}

.peptardel-o-section__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4.17vw, 5rem);
  padding: 0 clamp(1.25rem, 16.67vw, 20rem) clamp(3rem, 7.81vw, 9.375rem);
  box-sizing: border-box;
}

.peptardel-o-section__header {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.peptardel-o-section__title {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.083vw, 2.5rem);
  line-height: 1.3;
  color: var(--darkgreen);
  margin: 0;
}

.peptardel-o-section__desc,
.peptardel-o-section__desc-detail {
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.042vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--darkgreen);
  margin: 0;
}

/* Figma: diagram 1280×700, constrained */
.peptardel-o-section__diagram {
  width: 100%;
  max-width: 80rem; /* 1280px */
}

.peptardel-o-section__diagram img {
  width: 100%;
  height: auto;
  display: block;
}