/* ============================================================
   LIMPID · Company (회사소개)
   integratedbio.com/company 레이아웃 실측 이식.
   실측 기준(PC 1440) : 컨테이너 1344+48 · 본문 그리드 [441|883] gap 20
   H1 140/1.0/-3% · 선언문 46 · 대형헤딩 108 · 카드 r24 · 미디어 r30
   폰트·색·에셋만 림피드 토큰으로 치환한다.
   ============================================================ */

.co-page { background: var(--paper-soft); }

/* 라이트 토큰 별칭 : 다크 섹션(section--ink)이 토큰을 뒤집어도
   흰 카드가 원래 값을 되찾을 수 있게 루트에서 값을 고정해 둔다.
   (커스텀 프로퍼티는 선언 지점에서 계산돼 내려가므로 반전의 영향을 받지 않는다) */
:root {
  --co-lite-ink: var(--ink);
  --co-lite-ink-2: var(--ink-2);
  --co-lite-ink-3: var(--ink-3);
  --co-lite-ink-4: var(--ink-4);
  --co-lite-line: var(--line);
  --co-lite-paper-soft: var(--paper-soft);
}

/* 컨테이너 : 원본 1344 + 좌우 48 */
.co-shell {
  width: 100%;
  max-width: calc(1344px + 96px);
  margin-inline: auto;
  padding-inline: clamp(20px, 3.3vw, 48px);
}

/* 공용 : 2톤 헤드라인의 뒤쪽 절반 */
.co-mute { color: var(--ink-faint); }

/* 공용 : 흰 칩 라벨 (원본 h30 · r8 · fs14). 마커는 공용 mark-dot(림피드 심볼) */
.co-chip {
  --mark-size: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding-inline: 13px;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}
.co-chip--dark {
  background: rgba(255, 255, 255, .1);
  color: var(--on-ink);
}

/* 공용 : 원형(사각 라운드) 버튼 (원본 48x48 · r16) */
.co-circle {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.co-circle:hover { background: var(--brand); transform: translateY(2px); }
.co-circle--sm { width: 38px; height: 38px; border-radius: 10px; background: var(--brand); }

/* 공용 : 라벨+화살표 버튼 (원본 Work with us : 다크 알약 r12 + 컬러 사각) */
.co-btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding-left: 22px;
  gap: 18px;
  transition: transform var(--dur-fast) var(--ease);
}
.co-btn:hover { transform: translateY(-1px); }
/* flex 컬럼 안에서 가로로 늘어나지 않게 */
.co-half__body .co-btn { align-self: flex-start; width: fit-content; }
.co-btn__go {
  width: 48px;
  height: 48px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
}
.co-btn--light { background: #fff; color: var(--ink); }

/* 공용 : [441 | 883] 그리드 */
.co-cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 44px 20px;
  align-items: start;
}
.co-cols__aside { display: grid; gap: 28px; justify-items: start; }
.co-aside-text {
  font-size: clamp(1rem, 1.32vw, 1.1875rem);   /* 원본 19px */
  line-height: 1.68;
  color: var(--ink-2);
  max-width: 370px;
}

/* 공용 : 큰 선언문 (원본 46.4/1.1 → 한글은 행간을 살짝 연다) */
.co-statement {
  font-size: clamp(1.85rem, 3.25vw, 2.9rem);   /* 원본 46.4px */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}
.co-statement--sm { font-size: clamp(1.6rem, 2.75vw, 2.475rem); }   /* 원본 39.6px */

/* 섹션 공통 여백 */
.co-block { padding-block: clamp(52px, 6.5vw, 100px) 0; }

/* ============ 히어로 ============ */
.co-hero { padding-top: clamp(120px, 14vw, 180px); }

.co-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 482px);
  gap: clamp(36px, 5vw, 60px);
  padding-bottom: 50px;
  align-items: end;               /* 서술의 밑줄이 LIMPID 밑줄과 수평 */
}
.co-hero__title {
  font-size: clamp(2.6rem, 9.7vw, 8.75rem);   /* 원본 140px · 모바일 ~41px */
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--ink);
}
/* factory 와 같은 1회 등장 연출 : 줄 단위 마스크 안에서 글자가 차오른다 */
.co-hero__row {
  display: block;
  overflow: hidden;
  padding-top: .06em;
  padding-bottom: .1em;
  margin-bottom: -.12em;
}
/* company.js 가 글자를 <i> 로 분리하면 한 글자씩 차오른다 (JS 없으면 정적) */
.co-hero__row i {
  display: inline-block;
  font-style: normal;
  transform: translateY(125%);
  animation: co-rise .8s var(--ease-out) forwards;
}
@keyframes co-rise { to { transform: none; } }
.co-hero__desc {
  align-self: end;
  padding-bottom: .18em;          /* 대형 타이틀 하단 여백과 시각 보정 */
  font-size: clamp(1.05rem, 1.67vw, 1.5rem);  /* 원본 24px */
  line-height: 1.42;
  letter-spacing: -.02em;
  color: var(--ink);
  /* 타이틀 차오름 뒤에 떠오른다 (factory 리드와 같은 문법) */
  opacity: 0;
  transform: translateY(14px);
  animation: co-fade .7s var(--ease-out) .5s forwards;
}
@keyframes co-fade { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .co-hero__row i { animation: none; transform: none; }
  .co-hero__desc { animation: none; opacity: 1; transform: none; }
}

/* 풀블리드 미디어 : 양옆 12px · r30 · 2.35:1 */
.co-hero__media { padding-inline: 12px; }
.co-hero__ph {
  width: 100%;                /* aspect-ratio 가 min-height 로 폭을 키우지 못하게 고정 */
  aspect-ratio: 1416 / 603;
  border-radius: 30px;
  min-height: 240px;
  object-fit: cover;          /* img 슬롯 : 비율 유지 크롭 */
}

/* ============ What we do ============ */
.co-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: clamp(48px, 6vw, 88px);
  align-items: stretch;
}
.co-half__ph {
  width: 100%;
  /* 원본 레퍼런스 662/662 정사각 슬롯. height:100% 만 두면 행 높이가 정해지지 않아
     원본 비율대로 세로로 늘어나고 object-fit 도 무력해진다 */
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 340px;
  border-radius: 30px;
  object-fit: cover;          /* img 슬롯 : 비율 유지 크롭 */
  object-position: center 62%;/* 인물과 하단 제품 트레이가 함께 들어오는 지점 */
}
.co-half__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding: clamp(4px, 1vw, 16px) 0 0 clamp(0px, 2vw, 24px);
}
.co-half__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.co-half__cols p {
  font-size: clamp(1rem, 1.32vw, 1.1875rem);   /* 원본 19px */
  line-height: 1.72;
  color: var(--ink-2);
}

/* ============ 대형 헤딩 (원본 108px 2톤) ============ */
.co-giant {
  margin-top: clamp(72px, 10vw, 150px);
  font-size: clamp(2.9rem, 7.5vw, 6.75rem);   /* 원본 107.7px */
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--ink);
}

/* ============ 리더십 (원본 카드 431폭 · r24 상단) ============ */
.co-people {
  display: grid;
  /* 리더십 5인 : 3열 x 2행 (2026-08-11 대표 지시) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 20px;
}
.co-person {
  background: #fff;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  padding-bottom: 0;
  cursor: pointer;
}
/* 사진 인셋 : 원본 12px 마진 + r16, 호버 시 안쪽 사진만 확대 */
.co-person__card { position: relative; margin: 12px 12px 0; border-radius: 16px; overflow: hidden; }
.co-person__photo {
  width: 100%;
  aspect-ratio: 407 / 295;
  border-radius: 0;
  border: 0;
  min-height: 0;
  transition: transform .5s var(--ease-out);
}
/* 실사진이 들어온 카드 : 세로 원본을 카드 비율로 채운다 */
img.co-person__photo { display: block; object-fit: cover; }
.co-person:hover .co-person__photo,
.co-person:focus-visible .co-person__photo { transform: scale(1.05); }

/* 사진 위 링크드인 버튼 (원본 38x38 r8 다크) */
.co-person__li {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease);
}
.co-person__li:hover { background: var(--brand); }
/* 링크드인 주소가 아직 없는 동안 숨김 (2026-08-10 배포 점검).
   href 에 실제 주소를 넣으면 자동으로 다시 나타난다. 드로어 쪽은 company.js 가 같은 규칙으로 처리 */
.co-person__li[href="#"] { display: none; }
.co-person__name {
  margin: 26px 26px 0;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* 이름 뒤 학위 표기 (원본 ", PhD" 서픽스) */
.co-person__suffix {
  font-size: .68em;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
}
.co-person__job {
  margin: 8px 26px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* 하단 : View profile 라벨 + 화살표 타일 (원본 48x48 r12) */
.co-person__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 34px 12px 12px 26px;
}
.co-person__view {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.co-person:hover .co-person__view { color: var(--brand); }
.co-person__go {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
}
.co-person__go svg { transition: transform .6s cubic-bezier(.25, 1, .5, 1); }
.co-person:hover .co-person__go svg { transform: translateX(4px); }

/* ============ 팀 (원본 팀 카드 318x260 · r24 상단) ============ */
.co-rail {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.co-rail--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-team-card {
  background: #fff;
  border-radius: 24px 24px 0 0;
  min-height: clamp(190px, 18vw, 260px);
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.co-team-card__name {
  font-size: clamp(1.2rem, 1.67vw, 1.5rem);   /* 원본 이름 24px */
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--ink);
}
.co-team-card__job {
  margin-top: 9px;
  font-size: 14px;                             /* 원본 직책 14px */
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-3);
}
.co-team-card__foot { font-size: 14px; color: var(--ink-4); }

/* ============ Scientific Advisory (원본 SAB 실측) ============
   행 전폭 + 안쪽 컨테이너. 원본 : 사진 110x90 r12 · 이름 x201 · 직함 x576 ·
   버튼 48 우측 끝 · 호버 시 다크 패널 슬라이드(transform .5s) + 색 반전(.5s) */
.co-sab { margin-top: clamp(36px, 5vw, 80px); }

.co-sab__row {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.co-sab__row:last-child { border-bottom: 1px solid var(--line); }

/* 호버 패널 : 위에 숨어 있다가 내려온다 (원본 item_hover) */
.co-sab__row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--surface-dark);
  transform: translateY(-101%);
  transition: transform .5s var(--ease-out);
}
.co-sab__row:hover::before,
.co-sab__row:focus-within::before { transform: translateY(0); }

.co-sab__inner {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 330px) minmax(0, 1fr) 48px;
  gap: 43px;
  align-items: center;
  padding-block: 20px;
}

.co-sab__photo {
  width: 110px;
  height: 90px;
  min-height: 0;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.co-sab__photo::after { font-size: 10px; }
/* 자문단 행 전체가 <a> 로 바뀌어도 기존 co-sab__inner 그리드 레이아웃을 그대로 쓴다 */
a.co-sab__inner { text-decoration: none; color: inherit; }

.co-sab__name {
  font-size: clamp(1.2rem, 1.67vw, 1.5rem);   /* 원본 24px */
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color .5s var(--ease-out);
}
.co-sab__role {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .5s var(--ease-out);
}
.co-sab__btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
}
.co-sab__btn svg { transition: transform .6s cubic-bezier(.25, 1, .5, 1); }

.co-sab__row:hover .co-sab__name,
.co-sab__row:focus-within .co-sab__name { color: #fff; }
.co-sab__row:hover .co-sab__role,
.co-sab__row:focus-within .co-sab__role { color: rgba(255, 255, 255, .6); }
.co-sab__row:hover .co-sab__btn svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .co-sab__row::before, .co-sab__name, .co-sab__role, .co-sab__btn svg { transition: none; }
}

/* ============ 투자사 (원본 다크 섹션) ============ */
.co-invest {
  margin-top: clamp(72px, 9vw, 140px);
  padding-block: clamp(64px, 8vw, 120px);
}

/* 대표 카드 : 흰 면. 다크 섹션이 뒤집은 변수를 카드 안에서 되돌린다 */
.co-invest__feature {
  --ink: var(--co-lite-ink);
  --ink-2: var(--co-lite-ink-2);
  --ink-3: var(--co-lite-ink-3);
  --ink-4: var(--co-lite-ink-4);
  --line: var(--co-lite-line);
  --paper-soft: var(--co-lite-paper-soft);
  margin-top: 36px;
  background: #fff;
  color: var(--ink-2);
  border-radius: 24px;
  padding: clamp(28px, 3vw, 44px);
  display: grid;
  /* 내용물 2개(텍스트·이미지)에 맞춘 2칸 : 텍스트 좌측, 이미지 우측 끝 정렬 */
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.co-invest__title {
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--ink);
}
.co-invest__desc { font-size: 15px; line-height: 1.72; color: var(--ink-2); max-width: 44ch; }
.co-invest__feature-media {
  aspect-ratio: 318 / 180;
  border-radius: 16px;
  min-height: 0;
  display: block;
  overflow: hidden;
}
.co-invest__feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-out);
}
.co-invest__feature-media:hover img { transform: scale(1.03); }

/* 로고 그리드 : 4열 · 로고는 타일의 절반 폭 수준(원본 비율) · 호버 시 코너 브래킷 */
.co-invest__grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.co-invest__logo {
  position: relative;
  min-height: clamp(104px, 10.3vw, 148px);
  border: 1px solid var(--on-ink-line);
  border-radius: 16px;
  display: grid;
  place-items: center;
  padding: 20px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.co-invest__logo img {
  max-width: min(150px, 52%);
  max-height: 48px;
  object-fit: contain;
  /* 어떤 색 로고가 와도 원본처럼 흰 단색으로 통일 */
  filter: brightness(0) invert(1);
  opacity: .78;
  transition: opacity var(--dur) var(--ease);
}
.co-invest__logoname {
  display: none;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--on-ink-2);
  transition: color var(--dur) var(--ease);
}

/* 코너 브래킷 : 원본 item_corners. 평소엔 숨고 호버에 떠오른다 */
.co-invest__logo::after {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.96);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
  --ck: rgba(255, 255, 255, .55);
  background:
    linear-gradient(var(--ck), var(--ck)) left  0    top    0    / 14px 1.5px,
    linear-gradient(var(--ck), var(--ck)) left  0    top    0    / 1.5px 14px,
    linear-gradient(var(--ck), var(--ck)) right 0    top    0    / 14px 1.5px,
    linear-gradient(var(--ck), var(--ck)) right 0    top    0    / 1.5px 14px,
    linear-gradient(var(--ck), var(--ck)) left  0    bottom 0    / 14px 1.5px,
    linear-gradient(var(--ck), var(--ck)) left  0    bottom 0    / 1.5px 14px,
    linear-gradient(var(--ck), var(--ck)) right 0    bottom 0    / 14px 1.5px,
    linear-gradient(var(--ck), var(--ck)) right 0    bottom 0    / 1.5px 14px;
  background-repeat: no-repeat;
}
.co-invest__logo:hover { background: rgba(255, 255, 255, .045); }
.co-invest__logo:hover::after { opacity: 1; transform: scale(1); }
.co-invest__logo:hover img { opacity: 1; }
.co-invest__logo:hover .co-invest__logoname { color: var(--on-ink); }

/* ============ 연혁 (apr about Milestones 실측 구조) ============
   좌측 초대형 연도(첫 해만 4자리, 이후 2자리) + 우측 월별 항목.
   데이터는 랜딩 #timeline 을 company.js 가 불러와 다시 그린다 */
#history { padding-bottom: 0; }

.co-hist__head { text-align: center; margin-bottom: clamp(40px, 5vw, 72px); }
.co-hist__title {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--ink);
}
.co-hist__sub { margin-top: 10px; font-size: 14px; color: var(--ink-3); }

/* [세기(고정) | 연도 뒤 두 자리 + 항목] 2단. 세기는 62vh 지점에 붙는다.
   세기 칸은 글자폭만큼(auto), 간격 0 - 뒤 두 자리와 붙어 "2026" 으로 읽힌다 */
.co-hist {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
/* 높이는 company.js 가 마지막 연도 숫자 아래에 맞춰 계산한다 (수평 정렬 마감) */
.co-hist__fixed { height: 100%; align-self: start; }
.co-hist__century {
  position: sticky;
  top: 62vh;
  font-size: clamp(4.2rem, 11vw, 10.5rem);
  font-weight: 250;
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.co-hist__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(48px, 7vw, 130px);
  align-items: start;
  padding-block: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.co-hist__row:first-child { border-top: 0; padding-top: 0; }

.co-hist__year {
  font-size: clamp(4.2rem, 11vw, 10.5rem);
  font-weight: 250;
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* 세기 두 자리는 데스크톱에선 고정 요소가 대신 보여준다 */
.co-hist__yc { display: none; }

/* 연도 뒤 두 자리도 같은 지점에 붙는다 - 세기와 항상 한 줄로 조합되도록.
   행이 지나가는 동안 62vh 에 머물고, 행 영역을 벗어나면 함께 밀려난다 */
@media (min-width: 769px) {
  .co-hist__rows .co-hist__year {
    position: sticky;
    top: 62vh;
    align-self: start;
  }
}
.co-hist__entries { display: grid; gap: 13px; max-width: 660px; padding-top: 10px; }
.co-hist__entries li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
}
.co-hist__month {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.co-hist__text { font-size: 15px; line-height: 1.62; color: var(--ink-2); }

/* ============ 인재상 (apr about Potential Candidate 구조) ============ */
.co-talent {
  /* 푸터(공통 다크)와 면이 이어지지 않게 라운드 블록으로 분리.
     히어로 풀블리드 미디어와 같은 좌우 12px + r30 문법 */
  margin-top: clamp(64px, 8vw, 120px);
  margin-inline: 12px;
  margin-bottom: clamp(56px, 7vw, 104px);
  border-radius: 30px;
  padding-block: clamp(64px, 8vw, 120px);
}
.co-talent__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.co-talent__title {
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--on-ink);
}
.co-talent__sub { margin-top: 10px; font-size: 14px; color: var(--on-ink-3); }
.co-talent__list { margin-top: clamp(28px, 3.4vw, 48px); }

.co-talent__item { border-top: 1px solid var(--on-ink-line); }
.co-talent__item:last-child { border-bottom: 1px solid var(--on-ink-line); }

.co-talent__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 21px;
  text-align: left;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--on-ink);
  cursor: pointer;
}
.co-talent__q em {
  font-style: normal;
  margin-left: 10px;
  font-size: .72em;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--on-ink-3);
}

/* +/- 토글 아이콘 */
.co-talent__toggle { position: relative; width: 18px; height: 18px; flex: none; }
.co-talent__toggle::before,
.co-talent__toggle::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 0;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--on-ink-2);
  transform: translateY(-50%);
  transition: transform .35s var(--ease-out);
}
.co-talent__toggle::after { transform: translateY(-50%) rotate(90deg); }
.co-talent__item.is-open .co-talent__toggle::after { transform: translateY(-50%) rotate(0deg); }

.co-talent__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s var(--ease-out);
}
.co-talent__item.is-open .co-talent__a { max-height: 240px; }
.co-talent__a p {
  padding-bottom: 24px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--on-ink-2);
  max-width: 52ch;
}

.co-talent__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  min-height: 0;
  width: 100%;
  overflow: hidden;
}
.co-talent__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ 프로필 드로어 (원본 c-modal-bio 실측) ============ */
.co-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  transition: visibility 0s .45s;
}
.co-modal.is-open { visibility: visible; transition: none; }

.co-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 21, 35, .45);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.co-modal.is-open .co-modal__backdrop { opacity: 1; }

/* 닫기 : 패널 왼쪽 바깥 상단 (원본 48x48 r12) */
.co-modal__exit {
  position: absolute;
  top: 12px;
  right: calc(min(544px, 92vw) + 12px);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s var(--ease-out) .15s, transform .3s var(--ease-out);
}
.co-modal.is-open .co-modal__exit { opacity: 1; }
.co-modal__exit:hover { transform: rotate(90deg); }

/* 우측 패널 : 544px · 다크 · 좌측 모서리 r30 · 슬라이드 인 */
.co-modal__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(544px, 92vw);
  background: var(--surface-dark);
  border-radius: 30px 0 0 30px;
  transform: translateX(105%);
  transition: transform .4s var(--ease-out);
  z-index: 2;
}
.co-modal.is-open .co-modal__panel { transform: translateX(0); }

.co-modal__scroll {
  height: 100%;
  overflow-y: auto;
  padding: 32px 32px 44px;
}
.co-modal__photo .ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  min-height: 0;
  overflow: hidden;
}
/* 사진이 들어간 경우 자리표시자 장식을 전부 끈다.
   .ph 는 원래 "사진 넣기 전 빈 칸"용이라 옅은 배경(--paper-soft)·테두리(--line)·
   라벨 글자(::after)를 갖고 있다. 이게 그리드 한 행을 더 차지해서
   사진 아래에 약 6px 짜리 밝은 띠(대표가 본 '흰 선')가 남았다.
   company.js 가 실제 사진을 넣을 때 data-ph 속성을 지우므로,
   :not([data-ph]) 로 "진짜 사진이 든 상태"만 정확히 골라낸다. */
.co-modal__photo .ph:not([data-ph]) {
  display: block;
  background: none;
  border: 0;
}
.co-modal__photo .ph:not([data-ph])::after { content: none; }
.co-modal__photo .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-modal__name {
  margin-top: 32px;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: #fff;
}
.co-modal__name .co-person__suffix { color: rgba(255, 255, 255, .55); }
.co-modal__job {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.co-modal__bio { margin-top: 28px; display: grid; gap: 18px; }
.co-modal__bio p { font-size: var(--fs-body); line-height: 1.8; color: rgba(255, 255, 255, .82); }
.co-modal__li {
  margin-top: 32px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease);
}
.co-modal__li:hover { background: var(--brand-deep); }
.co-modal__li[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .co-modal__backdrop, .co-modal__panel, .co-modal__exit,
  .co-person__photo, .co-person__go svg { transition: none; }
}

/* ============ 반응형 ============ */
@media (max-width: 1024px) {
  .co-cols { grid-template-columns: 1fr; gap: 28px; }
  .co-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-invest__feature { grid-template-columns: 1fr; align-items: start; }
  .co-invest__feature-media { max-width: 318px; }
  .co-invest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  /* 모바일 : 타이틀 아래 서술 */
  .co-hero { padding-top: 130px; }
  .co-hero__grid { grid-template-columns: 1fr; padding-bottom: 36px; gap: 22px; }
  .co-hero__desc { padding-bottom: 0; }
  .co-hero__media { padding-inline: 8px; }
  .co-hero__ph { border-radius: 20px; min-height: 0; }

  .co-half { grid-template-columns: 1fr; }
  .co-half__ph { min-height: 240px; }
  .co-half__cols { grid-template-columns: 1fr; }
  .co-half__body { padding-left: 0; }

  .co-people { grid-template-columns: 1fr; }
  .co-rail, .co-rail--three { grid-template-columns: 1fr; }

  /* 원본 모바일 행 : 사진 왼쪽, 이름 위 + 직함 아래 스택 */
  .co-sab__inner {
    grid-template-columns: 64px minmax(0, 1fr) 40px;
    grid-template-areas: "t n b" "t r b";
    gap: 4px 16px;
  }
  .co-sab__photo { grid-area: t; width: 64px; height: 52px; border-radius: 10px; }
  .co-sab__name { grid-area: n; }
  .co-sab__role { grid-area: r; letter-spacing: .03em; }
  .co-sab__btn { grid-area: b; width: 40px; height: 40px; border-radius: 12px; }

  /* 인재상 블록 : 모바일 라운드 축소 */
  .co-talent { margin-inline: 8px; border-radius: 20px; }

  /* 연혁 : 고정 세기 없이 연도 4자리 전체 표시, 연도 위 항목 아래 */
  .co-hist { grid-template-columns: 1fr; }
  .co-hist__fixed { display: none; }
  .co-hist__yc { display: inline; }
  .co-hist__row { grid-template-columns: 1fr; gap: 18px; }
  .co-hist__entries { padding-top: 0; }

  /* 인재상 : 1단, 사진은 아래 */
  .co-talent__grid { grid-template-columns: 1fr; }

  /* 드로어 : 전폭 + 닫기 버튼을 패널 위로 */
  .co-modal__panel { width: 100%; border-radius: 0; }
  .co-modal__exit { right: 12px; background: rgba(255, 255, 255, .14); }
  .co-modal__scroll { padding: 20px 20px 40px; }
  .co-modal__name { margin-top: 24px; }

  /* 원본 모바일 : 로고 타일 격자 유지 */
  .co-invest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .co-invest__logo { min-height: 84px; padding: 14px; }
  .co-invest__logo img { max-width: 58%; max-height: 32px; }
  .co-invest__logoname { font-size: 15px; }
}