/* ============================================================
   회사개요 (회사소개)
   · 공통 제목 · 여백 · 대표 사진은 ../research/research.css 를 씀
   · 소개 사진 + 글 / 사업 사진 카드 4개 / 한눈에 보기 사진 + 표
   ============================================================ */

/* 마무리 사진 띠가 없어 푸터 위 여백을 따로 둠 */
.tr-body .r-main { padding-bottom: 140px; }
@media (max-width: 1920px) { .tr-body .r-main { padding-bottom: 120px; } }
@media (max-width: 1024px) { .tr-body .r-main { padding-bottom: 80px; } }

/* ---------- 대표 사진 (배너) ----------
   사진 위 카피는 쓰지 않습니다. 문구를 위쪽 페이지 타이틀로 합쳤습니다.
   비율은 연구·품질 페이지와 동일하게 공통값(데스크톱 32:11 / 모바일 4:3)을 그대로 씁니다.
   → 여기서 따로 지정하지 않습니다. */

/* 대표 사진 바로 다음 섹션만 위 여백을 조금 줄여, 사진과 「유니베라는 어떤 회사인가」가
   따로 노는 느낌을 없앱니다. (공통값 140px / 1920 이하 120px → 약 15% 축소) */
.tr-body .tra > .r-sec:first-child { padding-top: 120px; }
@media (max-width: 1920px) {
  .tr-body .tra > .r-sec:first-child { padding-top: 102px; }
}

/* 소개 — 사진 왼쪽 · 글 오른쪽.
   stretch 라서 사진 높이가 글 높이를 따라가고 위아래 끝선이 맞습니다.
   그래서 사진 칸에는 고정 비율을 주지 않고(모바일만 4:3), 사진은 절대배치로 채웁니다. */
.tra-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: stretch; }
.tra-about__img { position: relative; border-radius: 24px; overflow: hidden; background: var(--r-soft); }
.tra-about__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tra-about .r-desc + .r-desc { margin-top: 14px; }
/* 글 칸은 사진 높이에 맞춰 가운데 정렬 (제목이 위로 빠져 글이 짧아졌으므로) */
.tra-about__body { align-self: center; }

/* 사업 — 사진 카드 4개, 누르면 해당 페이지로 */
.tra-biz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; }
.tra-biz__item { display: flex; flex-direction: column; height: 100%; color: inherit; }
.tra-biz__img { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--r-soft); }
.tra-biz__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.tra-biz__item:hover .tra-biz__img img { transform: scale(1.05); }
/* 사진 모서리가 둥글어서 글자를 사진 왼쪽 끝에 딱 맞추면
   오히려 글자가 밖으로 튀어나와 보입니다. 시각 보정으로 살짝 안쪽에서 시작합니다. */
.tra-biz__no,
.tra-biz__ttl,
.tra-biz__txt { padding-left: 6px; }

.tra-biz__no { margin-top: 24px; font-size: 16px; font-weight: 700; color: var(--r-g); }
.tra-biz__dot { margin-right: 5px; font-style: normal; }   /* 분야 이름 앞 번호 */
.tra-biz__ttl { display: flex; align-items: center; margin-top: 6px; font-size: 26px; font-weight: 700; color: var(--r-ink); }
/* 메인 페이지 카드와 같은 방식 — 마우스를 올리면 제목 옆으로 화살표가 밀려 들어옴 */
.tra-biz__arrow { flex: none; width: 22px; height: 22px; margin-left: 7px; object-fit: contain; opacity: 0; transform: translateX(-8px); transition: opacity 0.6s ease, transform 0.6s ease; }
.tra-biz__item:hover .tra-biz__arrow { opacity: 1; transform: none; }
.tra-biz__txt { flex: 1; margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--r-txt); word-break: keep-all; }
.tra-biz__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 글자는 스크린리더용 — 화면에서는 제목 옆 화살표로 대신함 */

/* 한눈에 보기 — 사진 + 표 */
.tra-glance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: stretch; }   /* 사진 높이 = 표 높이 */
.tra-glance__img { position: relative; border-radius: 24px; overflow: hidden; background: var(--r-soft); }
.tra-glance__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tra-glance__list > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 24px; padding: 24px 4px; border-bottom: 1px solid var(--r-line); font-size: 19px; line-height: 1.5; }
.tra-glance__list > div:first-child { padding-top: 0; }   /* 첫 줄 글자를 사진 윗선에 맞춤 */
.tra-glance__list > div:last-child { padding-bottom: 0; }   /* 마지막 줄 글자를 사진 아랫선에 맞춤 */
.tra-glance__list > div:last-child { border-bottom: 0; }
.tra-glance__list dt { font-weight: 700; color: var(--r-ink); }
.tra-glance__list dd { font-weight: 500; color: var(--r-txt); word-break: keep-all; }

@media (max-width: 1920px) {
  .tra-about { gap: 72px; }
}
@media (max-width: 1024px) {

  .tra-about { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tra-about__img { border-radius: 16px; aspect-ratio: 4 / 3; }
  .tra-about__body { align-self: start; }
  .tra-about .r-quote br { display: none; }
  .tra-biz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .tra-biz__img { border-radius: 14px; }
  .tra-biz__no, .tra-biz__ttl, .tra-biz__txt { padding-left: 4px; }
  .tra-biz__no { margin-top: 14px; font-size: 13px; }
  .tra-biz__ttl { font-size: 19px; }
  .tra-biz__arrow { width: 18px; height: 18px; margin-left: 5px; }
  .tra-biz__txt { margin-top: 6px; font-size: 14px; }
  .tra-glance { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tra-glance__img { border-radius: 16px; aspect-ratio: 4 / 3; }
  .tra-glance__list > div { grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; padding: 15px 2px; font-size: 15px; }
}

/* 휴대폰 — 에코넷 4개 분야를 한 줄에 하나씩.
   2열로 두면 사진도 글도 작아져 읽기 어렵습니다. */
@media (max-width: 600px) {
  .tra-biz { grid-template-columns: minmax(0, 1fr); gap: 52px; }   /* 분야와 분야 사이 */
  .tra-biz__img { aspect-ratio: 16 / 9; }
  .tra-biz__no { margin-top: 22px; font-size: 14px; }              /* 사진과 글 사이 */
  .tra-biz__ttl { font-size: 22px; }
  .tra-biz__arrow { width: 20px; height: 20px; }
  .tra-biz__txt { margin-top: 8px; font-size: 15px; }
}

/* 태블릿 (601~1024) — 모바일 값이 1024px 까지 쓰여 글자가 작았습니다 */
@media (min-width: 601px) and (max-width: 1024px) {
  .tra-biz { gap: 40px 24px; }
  .tra-biz__no { margin-top: 18px; font-size: 15px; }
  .tra-biz__ttl { font-size: 22px; }
  .tra-biz__arrow { width: 20px; height: 20px; }
  .tra-biz__txt { margin-top: 10px; font-size: 16px; }
  .tra-about { gap: 36px; }
  .tra-glance { gap: 32px; }
  .tra-glance__list > div { grid-template-columns: 116px minmax(0, 1fr); column-gap: 18px; padding: 19px 3px; font-size: 17px; }
}

/* ===== 휴대폰 — 모서리 둥글기를 한 단계 줄임 =============================
   화면이 작아지면 같은 반지름도 상대적으로 더 둥글어 보입니다.
   24→18 · 20→16 · 18→14 · 16→13 · 14→12 · 12→10 · 10→8 로 한 단계씩.
   태블릿(601px 이상)과 PC 는 그대로입니다. */@media (max-width: 600px) {
  .tra-about__img { border-radius: 13px; }
  .tra-biz__img { border-radius: 12px; }
  .tra-glance__img { border-radius: 13px; }
}

/* ===== 본문은 휴대폰 · 태블릿에서 최소 16px ==============================
   읽는 글(문장)이 15px 이하로 내려가 있던 곳을 16px 로 올립니다.
   분류 · 번호 · 안내문 같은 '라벨'은 본문이 아니라 그대로 둡니다. */@media (max-width: 1024px) {
  .tra-biz__txt { font-size: 16px; }
  .tra-glance__list > div { font-size: 16px; }
}

/* 인용구 — 1025~1400px 에서는 글 칸이 화면의 절반이라, 강제 줄바꿈까지 겹치면
   「높여,」 「것.」 처럼 한두 글자만 남는 줄이 생깁니다.
   줄바꿈은 화면 폭에 맡기고 글자만 폭에 맞춰 줄입니다. */
@media (max-width: 1400px) {
  .tra-about .r-quote br { display: none; }
  .tra-about .r-quote p { font-size: clamp(24px, 2.6vw, 32px); }
}