@charset "utf-8";
/* research.html (PDF p3 기술과 증명 = 연구개발) 전용 */

/* ---------- 히어로 (y 72~832) ---------- */
.r-hero { position: relative; height: 760px; background: var(--c-deep); overflow: hidden; }
.r-hero__text { position: absolute; left: 0; top: 0; width: 634px; padding-top: 269px; text-align: center; color: var(--c-white); }
.r-hero__eyebrow { font-size: 13px; line-height: 20px; color: #c9d6d5; letter-spacing: -.02em; }
.r-hero__title { margin-top: 7px; font-size: 58px; line-height: 79px; font-weight: 300; letter-spacing: -.05em; }
.r-hero__title strong { font-weight: 700; }
.r-hero__desc { margin-top: 7px; font-size: 13px; line-height: 20px; color: #cdd6d6; letter-spacing: -.02em; }
.r-hero__img { position: absolute; left: 634px; top: 0; width: 806px; height: 760px; overflow: hidden; }
.r-hero__img img { position: absolute; left: 0; top: -190px; width: 806px; height: 1140px; }
.r-hero__img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 61, 66, .24); }

/* ---------- 세 가지 일 (y 832~1757) ---------- */
.works { padding-bottom: 171px; }
.works__grid { margin-top: 24px; display: flex; border-top: 1px solid var(--c-line-dark); border-bottom: 1px solid var(--c-line); }
.works__card { width: 360px; height: 436px; padding: 27px 0 0 28px; }
.works__card + .works__card { border-left: 1px solid var(--c-line); }
.works__label { padding-left: 10px; font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: .1em; color: var(--c-teal); }
.works__img { margin-top: 28px; width: 152px; height: 152px; border-radius: 50%; overflow: hidden; }
.works__img img { width: 100%; height: 100%; object-fit: cover; }
.works__title { margin-top: 32px; font-size: 26.5px; line-height: 35px; font-weight: 700; letter-spacing: -.03em; color: var(--c-ink); }
.works__text { margin-top: 7px; font-size: 12.6px; line-height: 21.5px; color: var(--c-body-2); letter-spacing: -.04em; white-space: nowrap; }

/* ---------- 균주 (y 1757~2821) ---------- */
.strains { padding-bottom: 118px; }
.strains__grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 350px); column-gap: 14px; row-gap: 33px; }
.strain {
  height: 235px;
  border-top: 2px solid var(--c-line-dark);
  background: var(--c-white);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; color: var(--c-ink);
  padding-top: 54px;
}
.strain__name { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -.02em; }
.strain__id { margin-top: 9px; font-size: 20px; line-height: 28px; letter-spacing: -.01em; }
.strain__text { margin-top: 4px; font-size: 15.3px; line-height: 24px; letter-spacing: -.02em; }
.strain:nth-child(5) .strain__text { margin-top: 16px; }  /* 원본: 한 줄 설명이 두 줄 카드의 가운데 높이 */

/* ---------- 국가 과제 (y 2821~3841) ---------- */
.national { background: #def4f5; padding-bottom: 118px; }
.national__grid { margin-top: 42px; display: grid; grid-template-columns: repeat(3, 351px); column-gap: 13px; row-gap: 32px; }
.nat { height: 268px; border-top: 2px solid var(--c-line-dark); background: var(--c-white); text-align: center; color: var(--c-ink); }
.nat__logo { height: 147px; margin-bottom: -25px; display: flex; align-items: center; justify-content: center; }
.nat__logo img { mix-blend-mode: multiply; }
.nat__tag {
  display: inline-block; height: 32px; min-width: 68px; padding: 0 17px;
  border-radius: 16px; background: var(--c-line-dark); color: var(--c-white);
  font-size: 15.5px; line-height: 32px; letter-spacing: -.02em;
}
.nat__year { margin-top: 9px; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; }
.nat__text { margin-top: 9px; font-size: 15.5px; line-height: 24px; letter-spacing: -.02em; }
.nat:nth-child(n+4) .nat__year { margin-top: 13px; }
.nat:nth-child(n+4) .nat__text { margin-top: 12px; }

/* ---------- 논문 · 수상 (y 3841~4559) ---------- */
.papers { padding-bottom: 118px; }
.papers .sec-title { padding-right: 56px; }
.papers__box { margin-top: 43px; display: flex; height: 266px; border-top: 1px solid var(--c-line-dark); border-bottom: 1px solid var(--c-line); }
.papers__col { width: 540px; padding: 21px 0 0 28px; }
.papers__col + .papers__col { border-left: 1px solid var(--c-line); }
.papers__head { font-size: 30px; line-height: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--c-ink); }
.papers__list { margin-top: 15px; }
.papers__list li { font-size: 14px; line-height: 28px; color: var(--c-body-2); letter-spacing: -.06em; white-space: nowrap; }
.papers__list li + li { padding-left: 3px; }

/* ---------- 배양 기술 (y 4559~5430) · R3-1 제목 교체 ---------- */
.culture { padding-bottom: 118px; }
.culture__box { width: var(--w-wide); margin: 52px auto 0; display: flex; }
.culture__img { flex: none; width: 576px; height: 550px; overflow: hidden; margin-left: 1px; }
.culture__img img { width: 576px; height: 576px; margin-top: -13px; }
.culture__body { margin-left: 47px; padding-top: 53px; }
.culture__title { font-size: 54px; line-height: 80px; font-weight: 300; letter-spacing: -.045em; color: var(--c-ink); white-space: nowrap; }
.culture__title strong { font-weight: 700; }
.culture__text { margin-top: 50px; font-size: 15.5px; line-height: 26px; color: var(--c-body); letter-spacing: -.035em; white-space: nowrap; }
.culture__text sup { font-size: 9px; line-height: 0; }

/* ---------- 기술 자료 CTA (y 5430~5982) ---------- */
.r-cta { height: 552px; background: url("../img/p3/img_7017.jpg") 0 -204px / 1440px 960px no-repeat; border-bottom: 1px solid #50706d; }
.r-cta::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .7); }
.r-cta > * { position: relative; }
.r-cta__desc { margin-top: 42px; font-size: 16px; line-height: 24px; letter-spacing: -.02em; }
.r-cta__btn { margin-top: 34px; text-align: center; }
.r-cta__btn .btn { width: 92px; height: 42px; padding: 0; }

/* ---------- 1440보다 넓은 화면: 분할 지점은 1440 기준, 사진은 오른쪽 뷰포트 끝까지 ---------- */
@media (min-width: 1441px) {
  .r-hero__text { left: calc(50% - 720px); }
  .r-hero__img { left: calc(50% - 86px); width: auto; right: 0; }
  .r-hero__img img { width: 100%; height: auto; aspect-ratio: 806 / 1140; object-fit: cover; top: 50%; transform: translateY(-50%); }
  .r-cta { background-position: center; background-size: cover; }
}

/* ---------- 모바일 (≤ 900) ---------- */
@media (max-width: 900px) {
  /* 히어로: 텍스트 패널 위, 사진 아래 4:3 */
  .r-hero { height: auto; }
  .r-hero__text { position: static; width: auto; padding: 64px 20px 56px; }
  .r-hero__eyebrow { font-size: 11px; line-height: 17px; letter-spacing: .04em; }
  .r-hero__title { margin-top: 14px; font-size: 36px; line-height: 1.3; letter-spacing: -.04em; }
  .r-hero__desc { margin-top: 14px; font-size: 13px; line-height: 20px; }
  .r-hero__img { position: relative; left: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .r-hero__img img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

  /* 세 가지 일: 1열 */
  .works { padding-bottom: 90px; }
  .works__grid { flex-direction: column; }
  .works__card { width: auto; height: auto; padding: 28px 0 32px; }
  .works__card + .works__card { border-left: 0; border-top: 1px solid var(--c-line); }
  .works__label { padding-left: 0; font-size: 13px; line-height: 20px; }
  .works__img { margin-top: 20px; width: 120px; height: 120px; }
  .works__title { margin-top: 20px; font-size: 20px; line-height: 1.4; }
  .works__text { margin-top: 10px; font-size: 14px; line-height: 1.6; white-space: normal; }
  .works__text br { display: none; }

  /* 균주: 1열 */
  .strains { padding-bottom: 70px; }
  .strains__grid { margin-top: 32px; grid-template-columns: 1fr; row-gap: 14px; }
  .strain { height: auto; padding: 28px 20px 30px; }
  .strain__name { font-size: 22px; line-height: 30px; }
  .strain__id { margin-top: 6px; font-size: 17px; line-height: 24px; }
  .strain__text, .strain:nth-child(5) .strain__text { margin-top: 8px; font-size: 14px; line-height: 1.6; }
  .strain__text br { display: none; }

  /* 국가 과제: 1열 */
  .national { padding-bottom: 70px; }
  .national__grid { margin-top: 32px; grid-template-columns: 1fr; row-gap: 14px; }
  .nat { height: auto; padding: 0 20px 28px; }
  .nat__logo { height: 120px; margin-bottom: -12px; }
  .nat__tag { height: 28px; min-width: 60px; padding: 0 14px; border-radius: 14px; font-size: 13px; line-height: 28px; }
  .nat__year, .nat:nth-child(n+4) .nat__year { margin-top: 8px; font-size: 18px; line-height: 26px; }
  .nat__text, .nat:nth-child(n+4) .nat__text { margin-top: 6px; font-size: 14px; line-height: 1.6; }

  /* 논문 · 수상: 1열 */
  .papers { padding-bottom: 70px; }
  .papers .sec-title { padding-right: 0; }
  .papers__box { margin-top: 32px; height: auto; flex-direction: column; }
  .papers__col { width: auto; padding: 24px 0 28px; }
  .papers__col + .papers__col { border-left: 0; border-top: 1px solid var(--c-line); }
  .papers__head { font-size: 22px; line-height: 30px; }
  .papers__list { margin-top: 12px; }
  .papers__list li { font-size: 14px; line-height: 1.6; letter-spacing: -.03em; white-space: normal; }
  .papers__list li + li { margin-top: 8px; padding-left: 0; }

  /* 배양 기술: 사진 위, 텍스트 아래 */
  .culture { padding-bottom: 70px; }
  .culture__box { width: auto; margin: 32px 20px 0; flex-direction: column; }
  .culture__img { width: 100%; height: auto; margin-left: 0; aspect-ratio: 4 / 3; }
  .culture__img img { width: 100%; height: 100%; margin-top: 0; object-fit: cover; }
  .culture__body { margin-left: 0; padding-top: 28px; }
  .culture__title { font-size: 28px; line-height: 1.35; white-space: normal; }
  .culture__text { margin-top: 20px; font-size: 15px; line-height: 1.6; white-space: normal; }
  .culture__text br { display: none; }

  /* 기술 자료 CTA */
  .r-cta { height: auto; padding-bottom: 80px; background-position: center; background-size: cover; }
  .r-cta__desc { margin-top: 20px; font-size: 15px; line-height: 1.6; text-align: center; }
  .r-cta__btn { margin-top: 28px; }
  .r-cta__btn .btn { width: auto; height: 48px; padding: 0 20px; }
}