/* pipeline-drug-discovery.css - Auto-merged from 7 section files */
/* Do not edit directly - regenerate with merge_section_css.py */

/* ========== 01-header-타이틀-배경-이미지 ========== */
/* ==========================================================================
   Header Section - Pipeline Drug Discovery
   Section: header-타이틀-배경-이미지
   Size: 1920 x 1080
   ========================================================================== */

/* ------------------------------------------------------------------------- */
/* Section Container
/* ------------------------------------------------------------------------- */
.header-section {
  width: 100%;
  height: 25rem; /* 400px */
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 320px 2.5rem;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------------- */
/* Content Container
/* ------------------------------------------------------------------------- */
.header-content {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2.1875rem; /* 35px */
  overflow: hidden;
}

/* ------------------------------------------------------------------------- */
/* Title Wrapper
/* ------------------------------------------------------------------------- */
.title-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* ------------------------------------------------------------------------- */
/* Title Accent Bar
/* ------------------------------------------------------------------------- */
.title-accent {
  width: 0.625rem; /* 10px */
  height: 100%;
  min-height: 4.5rem; /* 72px - 60px * 1.2 line-height */
  background-color: var(--logogreen);
  flex-shrink: 0;
}

/* ------------------------------------------------------------------------- */
/* Header Title
/* ------------------------------------------------------------------------- */
.header-title {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: 3.75rem; /* 60px */
  line-height: 1.2;
  color: var(--logogreen);
  text-transform: capitalize;
  white-space: nowrap;
  margin: 0;
  padding-left: 2.1875rem; /* 35px gap */
}

/* ==========================================================================
   Responsive - Tablet (768px ~ 1199px)
   ========================================================================== */
@media (max-width: 1199px) {
  .header-section {
    height: auto;
    min-height: 31.25rem; /* 500px */
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 2rem;
  }

  .header-content {
    width: 100%;
    max-width: 50rem; /* 800px */
  }

  .header-title {
    font-size: 2.75rem; /* 44px */
  }

  .title-accent {
    min-height: 3.5rem; /* 56px */
  }
}

/* ==========================================================================
   Responsive - Mobile (~ 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .header-section {
    min-height: 18.75rem; /* 300px */
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 1.5rem;
  }

  .header-content {
    width: 100%;
    gap: 1rem;
  }

  .header-title {
    font-size: 1.75rem; /* 28px */
    white-space: normal;
    padding-left: 1rem;
  }

  .title-accent {
    width: 0.375rem; /* 6px */
    min-height: 2.5rem; /* 40px */
  }
}

/* ========== 02-navbar-index-서브-네비게이션 ========== */
/* ===========================================
   Navbar Index - Sub Navigation
   페이지: pipeline-drug-discovery
   섹션: 02-navbar-index-서브-네비게이션
   =========================================== */

/* ---------------------------------------------
   Section Container
   --------------------------------------------- */
/* Uses common.css .navbar-index base styles */

/* ---------------------------------------------
   Breadcrumb Navigation
   --------------------------------------------- */
.navbar-index__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-index__link {
  font-family: var(--font-poppins);
  font-size: 1.25rem; /* 20px */
  font-weight: 400;
  line-height: 2.625rem; /* 42px */
  color: rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

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

/* Navbar responsive handled by common.css */

/* ========== 03-pipeline-module-파이프라인-모듈 ========== */
/* Pipeline Module Section */
.pipeline-module {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
}

.pipeline-module-inner {
  width: 100%;
  max-width: 1920px;
  display: flex;
  align-items: flex-start;
  gap: 3.75rem; /* 60px */
  padding: 6.25rem clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem) 3.75rem;
  box-sizing: border-box;
  position: relative;
}

.pipeline-module-inner::before,
.pipeline-module-inner::after {
  content: '';
  position: absolute;
  left: clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem);
  right: clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem);
  height: 1px;
  background-color: #c0c0c0;
}

.pipeline-module-inner::before {
  top: 0;
}

.pipeline-module-inner::after {
  bottom: 0;
}

/* Left Side: Pipeline Info */
.pipeline-info {
  width: 18.75rem; /* 300px */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6.25rem; /* 100px */
}

.pipeline-title-wrap {
  width: 100%;
}

.pipeline-title {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: 2.625rem; /* 42px */
  line-height: 1.3;
  color: var(--darkgreen);
  text-transform: capitalize;
  margin: 0;
}

.pipeline-details {
  display: flex;
  flex-direction: column;
  gap: 1.1875rem; /* 19px */
  width: 100%;
}

.detail-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* 6px */
}

.detail-label {
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
  color: var(--logogreen);
  margin: 0;
}

.detail-value {
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
  letter-spacing: -0.025rem; /* -0.4px */
  color: #000000;
  text-transform: capitalize;
  margin: 0;
}

/* Right Side: Pipeline Content */
.pipeline-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3.75rem; /* 60px */
  align-items: flex-end;
}

/* Pipeline Chart */
.pipeline-chart {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5625rem; /* 25px */
}

.chart-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
  color: #000000;
}

.chart-header-label {
  width: clamp(5rem, 10vw, 9.375rem);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.chart-phase {
  flex: 1;
  text-align: center;
}

.chart-divider {
  width: 100%;
  height: 1px;
  background-color: #c0c0c0;
}

.chart-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.chart-indication {
  width: clamp(5rem, 10vw, 9.375rem);
  flex-shrink: 0;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
  letter-spacing: -0.025rem; /* -0.4px */
  color: #000000;
  text-transform: capitalize;
}

.chart-bar {
  flex: 1;
  height: 0.375rem; /* 6px */
  background-color: rgba(0, 0, 0, 0.2);
}

.chart-bar.active {
  background-color: var(--logogreen);
}

/* Pipeline Description */
.pipeline-description {
  width: 100%;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 1.0625rem; /* 17px */
  line-height: 1.5;
  color: #000000;
}

.pipeline-description ul {
  margin: 0;
  padding: 0;
  padding-left: 1.5625rem; /* 25px */
  list-style-type: disc;
}

.pipeline-description li {
  margin-bottom: 0.25rem;
}

.pipeline-description li:last-child {
  margin-bottom: 0;
}

/* More Button */
.btn-more {
  flex-shrink: 0;
  width: 5rem; /* 80px */
  height: 5rem; /* 80px */
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-more:hover {
  background-color: #ffffff;
}

.btn-more-icon {
  width: 2.25rem; /* 36px */
  height: auto;
}

/* ===========================
   Responsive: Tablet (768px ~ 1199px)
   =========================== */
@media (max-width: 1199px) {
  .pipeline-module-inner {
    flex-direction: column;
    gap: 2.5rem;
    padding: 2.5rem 5%;
  }

  .pipeline-info {
    width: 100%;
    gap: 2rem;
  }

  .pipeline-content {
    width: 100%;
  }

  .chart-header {
    font-size: 0.8125rem;
  }

  .chart-header-label {
    width: 7rem;
  }

  .chart-indication {
    width: 7rem;
    font-size: 1rem;
  }

  .btn-more {
    position: absolute;
    right: 5%;
    top: 2.5rem;
  }
}

/* ===========================
   Responsive: Mobile (~ 767px)
   =========================== */
@media (max-width: 767px) {
  .pipeline-module-inner {
    gap: 2rem;
    padding: 2rem 5%;
  }

  .pipeline-info {
    gap: 1.5rem;
  }

  .pipeline-title {
    font-size: 1.75rem;
  }

  .detail-label {
    font-size: 0.8125rem;
  }

  .detail-value {
    font-size: 1rem;
  }

  .pipeline-chart {
    gap: 1rem;
  }

  .chart-header-label {
    width: 5rem;
    flex-shrink: 0;
  }

  .chart-phase {
    font-size: 0.6875rem;
  }

  .chart-indication {
    width: 5rem;
    font-size: 0.875rem;
    word-break: keep-all;
  }

  .chart-bar {
    height: 0.25rem;
  }

  .pipeline-description {
    font-size: 0.9375rem;
  }

  .pipeline-description ul {
    padding-left: 1.25rem;
  }

  .btn-more {
    width: 3.5rem;
    height: 3.5rem;
  }

  .btn-more-icon {
    width: 1.5rem;
  }
}

/* ========== 04-pipeline-detail-1-inflammatory-diseases ========== */
/* =========================================
   Pipeline Detail Section 1 - Inflammatory Diseases
   ========================================= */

.pipeline-detail-section.pipeline-detail-1 {
  width: 100%;
  background-color: #ffffff;
}

.pipeline-detail-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 3.75rem; /* 60px */
  padding: 3.75rem clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem) 5.625rem;
  box-sizing: border-box;
  position: relative;
}

.pipeline-detail-container::before,
.pipeline-detail-container::after {
  content: '';
  position: absolute;
  left: clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem);
  right: clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem);
  height: 1px;
  background-color: #c0c0c0;
}

.pipeline-detail-container::before {
  top: 0;
}

.pipeline-detail-container::after {
  bottom: 0;
}

/* =========================================
   Title Area
   ========================================= */

.pipeline-title-area {
  flex-shrink: 0;
  width: 18.75rem; /* 300px */
}

.pipeline-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-paperlogy);
  font-weight: 700;
  color: var(--darkgreen);
  text-transform: capitalize;
  line-height: 1.3;
}

.pipeline-title .title-line {
  font-size: 2.625rem; /* 42px */
}

.pipeline-title .title-subtitle {
  font-size: 2.125rem; /* 34px */
}

/* =========================================
   Pipeline Table Area
   ========================================= */

.pipeline-table-area {
  flex: 1;
  min-width: 0;
}

.pipeline-content {
  display: flex;
  flex-direction: column;
  gap: 1.5625rem; /* 25px */
  width: 100%;
}

/* Header Row */
.pipeline-header-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
  color: #000000;
}

.header-indication {
  width: clamp(5rem, 10vw, 9.375rem);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.header-phase {
  flex: 1;
  text-align: center;
}

/* Divider */
.pipeline-divider {
  width: 100%;
  height: 1px;
  background-color: #c0c0c0;
}

/* Data Row */
.pipeline-data-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.indication-name {
  width: clamp(5rem, 10vw, 9.375rem);
  flex-shrink: 0;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
  letter-spacing: -0.025rem; /* -0.4px */
  color: #000000;
  text-transform: capitalize;
}

.phase-bar {
  flex: 1;
  height: 0.375rem; /* 6px */
  background-color: rgba(0, 0, 0, 0.2);
}

.phase-bar.active {
  background-color: var(--logogreen);
}

/* =========================================
   Plus Button
   ========================================= */

.pipeline-plus-btn {
  flex-shrink: 0;
  width: 5rem; /* 80px */
  height: 5rem; /* 80px */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pipeline-plus-btn .plus-icon {
  width: 2.25rem; /* 36px */
  height: 2.25rem; /* 36px */
}

/* =========================================
   Responsive - Tablet
   ========================================= */

@media (max-width: 1199px) {
  .pipeline-detail-container {
    flex-direction: column;
    gap: 2rem;
    padding: 2.5rem 5%;
  }

  .pipeline-title-area {
    width: 100%;
  }

  .pipeline-title {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
  }

  .pipeline-table-area {
    width: 100%;
  }

  .pipeline-content {
    width: 100%;
  }

  .pipeline-plus-btn {
    position: absolute;
    right: 5%;
    top: 2.5rem;
  }
}

/* =========================================
   Responsive - Mobile
   ========================================= */

@media (max-width: 768px) {
  .pipeline-detail-container {
    gap: 1.5rem;
    padding: 2rem 5%;
  }

  .pipeline-title .title-line {
    font-size: 1.75rem;
  }

  .pipeline-title .title-subtitle {
    font-size: 1.5rem;
  }

  .header-indication {
    width: 5rem;
  }

  .header-phase {
    font-size: 0.6875rem;
  }

  .indication-name {
    width: 5rem;
    font-size: 0.875rem;
    word-break: keep-all;
  }

  .pipeline-content {
    width: 100%;
    gap: 1rem;
  }

  .pipeline-plus-btn {
    width: 3.5rem;
    height: 3.5rem;
  }

  .pipeline-plus-btn .plus-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ========== 05-pipeline-detail-2-cancer ========== */
/* ===========================================
   Pipeline Detail 2 - Cancer Section
   Size: 1920 x 1080 (context), component height auto
   =========================================== */

.pipeline-detail-2 {
  width: 100%;
  background-color: #ffffff;
}

.pipeline-detail-2__container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 3.75rem; /* 60px */
  padding: 3.75rem clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem) 5.625rem;
  box-sizing: border-box;
  position: relative;
}

.pipeline-detail-2__container::before,
.pipeline-detail-2__container::after {
  content: '';
  position: absolute;
  left: clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem);
  right: clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem);
  height: 1px;
  background-color: #c0c0c0;
}

.pipeline-detail-2__container::before {
  top: 0;
}

.pipeline-detail-2__container::after {
  bottom: 0;
}

/* Title Area */
.pipeline-detail-2__title-area {
  flex-shrink: 0;
  width: 18.75rem; /* 300px */
}

.pipeline-detail-2__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-paperlogy);
  font-weight: 700;
  color: var(--darkgreen);
  text-transform: capitalize;
  line-height: 1.3;
}

.pipeline-detail-2__title-main {
  font-size: 2.625rem; /* 42px */
}

.pipeline-detail-2__title-sub {
  font-size: 2.125rem; /* 34px */
}

/* Content Area */
.pipeline-detail-2__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.pipeline-detail-2__table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5625rem; /* 25px */
}

/* Header Row */
.pipeline-detail-2__header-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
  color: #000000;
}

.pipeline-detail-2__header-label {
  width: clamp(5rem, 10vw, 9.375rem);
  flex-shrink: 0;
}

.pipeline-detail-2__header-label p {
  margin: 0;
}

.pipeline-detail-2__header-cell {
  flex: 1;
  text-align: center;
  margin: 0;
}

/* Divider */
.pipeline-detail-2__divider {
  width: 100%;
  height: 1px;
  background-color: #c0c0c0;
}

/* Data Row */
.pipeline-detail-2__data-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.pipeline-detail-2__indication {
  width: clamp(5rem, 10vw, 9.375rem);
  flex-shrink: 0;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
  letter-spacing: -0.025rem; /* -0.4px */
  color: #000000;
  text-transform: capitalize;
  margin: 0;
}

.pipeline-detail-2__progress-bar {
  flex: 1;
  height: 0.375rem; /* 6px */
  background-color: rgba(0, 0, 0, 0.2);
}

.pipeline-detail-2__progress-bar--active {
  background-color: var(--logogreen);
}

/* Plus Button */
.pipeline-detail-2__plus-btn {
  flex-shrink: 0;
  width: 5rem; /* 80px */
  height: 5rem; /* 80px */
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.pipeline-detail-2__plus-icon {
  width: 2.25rem; /* 36px */
  height: 2.25rem; /* 36px */
}

/* ===========================================
   Responsive: Tablet (max-width: 1199px)
   =========================================== */
@media (max-width: 1199px) {
  .pipeline-detail-2__container {
    flex-direction: column;
    gap: 2rem;
    padding: 2.5rem 5%;
  }

  .pipeline-detail-2__title-area {
    width: 100%;
  }

  .pipeline-detail-2__title {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
  }

  .pipeline-detail-2__title-main {
    font-size: 2rem;
  }

  .pipeline-detail-2__title-sub {
    font-size: 1.5rem;
  }

  .pipeline-detail-2__content {
    width: 100%;
  }

  .pipeline-detail-2__header-row {
    font-size: 0.8125rem;
  }

  .pipeline-detail-2__header-label {
    width: 7rem;
    flex-shrink: 0;
  }

  .pipeline-detail-2__indication {
    width: 7rem;
    flex-shrink: 0;
    font-size: 1rem;
  }

  .pipeline-detail-2__plus-btn {
    position: absolute;
    right: 5%;
    top: 2.5rem;
    width: 3.5rem;
    height: 3.5rem;
  }

  .pipeline-detail-2__plus-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ===========================================
   Responsive: Mobile (max-width: 768px)
   =========================================== */
@media (max-width: 768px) {
  .pipeline-detail-2__container {
    gap: 1.5rem;
    padding: 2rem 5%;
  }

  .pipeline-detail-2__title {
    flex-direction: column;
    gap: 0;
  }

  .pipeline-detail-2__title-main {
    font-size: 1.5rem;
  }

  .pipeline-detail-2__title-sub {
    font-size: 1.25rem;
  }

  .pipeline-detail-2__table {
    gap: 1rem;
  }

  .pipeline-detail-2__header-row {
    font-size: 0.6875rem;
  }

  .pipeline-detail-2__header-label {
    width: 5rem;
    flex-shrink: 0;
  }

  .pipeline-detail-2__indication {
    width: 5rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    word-break: keep-all;
  }

  .pipeline-detail-2__progress-bar {
    height: 0.25rem;
  }

  .pipeline-detail-2__plus-btn {
    top: 1.5rem;
    width: 3rem;
    height: 3rem;
  }

  .pipeline-detail-2__plus-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ========== 06-pipeline-detail-3-rare-diseases ========== */
/* ========================================
   Pipeline Detail 3 - Rare Diseases (치주염 치료제)
   Section: pipeline-drug-discovery/06
   ======================================== */

.pipeline-detail-3 {
  width: 100%;
  background-color: #ffffff;
}

.pipeline-detail-3__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 3.75rem clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem) 5.625rem;
  display: flex;
  align-items: flex-start;
  position: relative;
  gap: 3.75rem;
  box-sizing: border-box;
}

.pipeline-detail-3__container::before,
.pipeline-detail-3__container::after {
  content: '';
  position: absolute;
  left: clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem);
  right: clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem);
  height: 1px;
  background-color: #c0c0c0;
}

.pipeline-detail-3__container::before {
  top: 0;
}

.pipeline-detail-3__container::after {
  bottom: 0;
}

/* 제목 영역 */
.pipeline-detail-3__title-area {
  flex-shrink: 0;
  width: 18.75rem;
}

.pipeline-detail-3__title {
  display: flex;
  flex-direction: column;
  color: var(--darkgreen);
  font-family: var(--font-paperlogy);
  font-weight: 700;
  line-height: 1.3;
  text-transform: capitalize;
  margin: 0;
}

.pipeline-detail-3__title-main {
  font-size: 2.625rem;
}

.pipeline-detail-3__title-sub {
  font-size: 2.125rem;
}

/* 콘텐츠 영역 */
.pipeline-detail-3__content {
  flex: 1;
  min-width: 0;
}

.pipeline-detail-3__table {
  display: flex;
  flex-direction: column;
  gap: 1.5625rem;
  width: 100%;
}

/* 헤더 */
.pipeline-detail-3__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-pretendard);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.pipeline-detail-3__header-indication {
  display: flex;
  flex-direction: column;
  width: clamp(5rem, 10vw, 9.375rem);
  flex-shrink: 0;
}

.pipeline-detail-3__header-phase {
  flex: 1;
  text-align: center;
}

/* 구분선 */
.pipeline-detail-3__divider {
  width: 100%;
  height: 1px;
  background-color: #c0c0c0;
}

/* 행 */
.pipeline-detail-3__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pipeline-detail-3__indication {
  width: clamp(5rem, 10vw, 9.375rem);
  flex-shrink: 0;
  font-family: var(--font-pretendard);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.025rem;
  color: #000000;
  text-transform: capitalize;
}

.pipeline-detail-3__progress {
  flex: 1;
  height: 0.375rem;
  background-color: rgba(0, 0, 0, 0.2);
}

.pipeline-detail-3__progress--active {
  background-color: var(--logogreen);
}

/* 확장 버튼 */
.pipeline-detail-3__expand-btn {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  transition: transform 0.2s ease;
}

.pipeline-detail-3__expand-btn:hover {
  transform: scale(1.05);
}

.pipeline-detail-3__expand-icon {
  width: 2.25rem;
  height: 2.25rem;
}

/* ========================================
   Responsive: Tablet (768px ~ 1199px)
   ======================================== */
@media (max-width: 1199px) {
  .pipeline-detail-3__container {
    padding: 3rem 5%;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .pipeline-detail-3__title-area {
    width: 100%;
    margin-bottom: 1rem;
  }

  .pipeline-detail-3__title {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
  }

  .pipeline-detail-3__title-main {
    font-size: 2rem;
  }

  .pipeline-detail-3__title-sub {
    font-size: 1.5rem;
  }

  .pipeline-detail-3__content {
    flex: 1;
    min-width: 0;
  }

  .pipeline-detail-3__header-indication,
  .pipeline-detail-3__indication {
    width: 7rem;
    flex-shrink: 0;
  }

  .pipeline-detail-3__expand-btn {
    position: absolute;
    right: 5%;
    top: 2.5rem;
    width: 4rem;
    height: 4rem;
  }

  .pipeline-detail-3__expand-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ========================================
   Responsive: Mobile (~ 767px)
   ======================================== */
@media (max-width: 767px) {
  .pipeline-detail-3__container {
    padding: 2rem 5%;
    flex-direction: column;
    gap: 1.5rem;
  }

  .pipeline-detail-3__title-area {
    width: 100%;
  }

  .pipeline-detail-3__title {
    flex-direction: column;
    gap: 0;
  }

  .pipeline-detail-3__title-main {
    font-size: 1.75rem;
  }

  .pipeline-detail-3__title-sub {
    font-size: 1.25rem;
  }

  .pipeline-detail-3__content {
    width: 100%;
  }

  .pipeline-detail-3__table {
    gap: 1rem;
  }

  .pipeline-detail-3__header {
    font-size: 0.6875rem;
  }

  .pipeline-detail-3__header-indication,
  .pipeline-detail-3__indication {
    width: 5rem;
    flex-shrink: 0;
  }

  .pipeline-detail-3__indication {
    font-size: 0.875rem;
    word-break: keep-all;
  }

  .pipeline-detail-3__expand-btn {
    align-self: flex-end;
    width: 3.5rem;
    height: 3.5rem;
  }

  .pipeline-detail-3__expand-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ========== 07-pipeline-detail-4-vaccines ========== */
/* ========================================
   Pipeline Detail 4 - Vaccines Section
   ======================================== */

.pipeline-detail-vaccines {
  width: 100%;
  background-color: #ffffff;
}

.pipeline-vaccines-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 3.75rem clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem) 5.625rem;
  display: flex;
  align-items: flex-start;
  gap: 3.75rem; /* 60px */
  box-sizing: border-box;
  position: relative;
}

.pipeline-vaccines-wrapper::before,
.pipeline-vaccines-wrapper::after {
  content: '';
  position: absolute;
  left: clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem);
  right: clamp(1.25rem, calc((100vw - 80rem) / 2), 20rem);
  height: 1px;
  background-color: #c0c0c0;
}

.pipeline-vaccines-wrapper::before {
  top: 0;
}

.pipeline-vaccines-wrapper::after {
  bottom: 0;
}

/* ----------------------------------------
   Title Section
   ---------------------------------------- */
.pipeline-vaccines-title {
  flex-shrink: 0;
  width: 18.75rem; /* 300px */
}

.pipeline-vaccines-heading {
  display: flex;
  flex-direction: column;
  font-family: var(--font-paperlogy);
  font-weight: 700;
  color: var(--darkgreen);
  line-height: 1.3;
  text-transform: capitalize;
  margin: 0;
}

.pipeline-vaccines-heading .heading-line {
  font-size: 2.625rem; /* 42px */
}

.pipeline-vaccines-heading .heading-sub {
  font-size: 2.125rem; /* 34px */
}

/* ----------------------------------------
   Content / Progress Table
   ---------------------------------------- */
.pipeline-vaccines-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.pipeline-progress-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5625rem; /* 25px */
}

/* Header Row */
.progress-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
  color: #000000;
}

.header-indication {
  width: clamp(5rem, 10vw, 9.375rem);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.header-phase {
  flex: 1;
  text-align: center;
}

/* Divider */
.progress-divider {
  width: 100%;
  height: 1px;
  background-color: #c0c0c0;
}

/* Data Row */
.progress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.row-indication {
  width: clamp(5rem, 10vw, 9.375rem);
  flex-shrink: 0;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
  letter-spacing: -0.025rem; /* -0.4px */
  color: #000000;
  text-transform: capitalize;
}

.progress-bar {
  flex: 1;
  height: 0.375rem; /* 6px */
  background-color: rgba(0, 0, 0, 0.2);
}

.progress-bar.active {
  background-color: var(--logogreen);
}

/* ----------------------------------------
   Expand Button
   ---------------------------------------- */
.pipeline-vaccines-expand {
  flex-shrink: 0;
  width: 5rem; /* 80px */
  height: 5rem; /* 80px */
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.2s ease;
}

.pipeline-vaccines-expand:hover {
  opacity: 0.8;
}

.expand-icon {
  width: 2.25rem; /* 36px */
  height: 2.25rem; /* 36px */
}

/* ========================================
   Responsive - Tablet (max-width: 1199px)
   ======================================== */
@media (max-width: 1199px) {
  .pipeline-vaccines-wrapper {
    flex-direction: column;
    padding: 2.5rem 5%;
    gap: 2rem;
  }

  .pipeline-vaccines-title {
    width: 100%;
  }

  .pipeline-vaccines-heading .heading-line {
    font-size: 2rem;
  }

  .pipeline-vaccines-heading .heading-sub {
    font-size: 1.625rem;
  }

  .pipeline-vaccines-content {
    width: 100%;
  }

  .pipeline-vaccines-expand {
    position: absolute;
    right: 5%;
    top: 2.5rem;
    width: 4rem;
    height: 4rem;
  }

  .expand-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ========================================
   Responsive - Mobile (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
  .pipeline-vaccines-wrapper {
    padding: 2rem 5%;
    gap: 1.5rem;
  }

  .pipeline-vaccines-heading .heading-line {
    font-size: 1.625rem;
  }

  .pipeline-vaccines-heading .heading-sub {
    font-size: 1.25rem;
  }

  .progress-header {
    font-size: 0.6875rem;
  }

  .header-indication {
    width: 5rem;
    flex-shrink: 0;
  }

  .row-indication {
    width: 5rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    word-break: keep-all;
  }

  .progress-bar {
    height: 0.25rem;
  }

  .pipeline-vaccines-expand {
    width: 3rem;
    height: 3rem;
  }

  .expand-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}