/* 회사 소개·연구·인재 채용 화면 전용 조합. 토큰과 기존 클래스만, 접두사(co- tech- careers-)를 붙인다. */

/* 회사 소개 첫 화면: 좁은 화면은 사진 위쪽(천장)이 빈 칸으로 보여서, 사람과 창밖이 보이는 아래쪽으로 당겨 확대한다 */
@media (max-width:767px){.co-page .page-hero-ed .photo-bg img{transform:scale(1.45);transform-origin:58% 88%}}

/* 사진 + 번호 목록 두 칸(회사 소개 '일하는 원칙', 연구 '연구 원칙'): 넓은 화면은 사진 위아래를 글의 처음(장 번호)과 끝(목록 끝 선)에 맞춘다 */
@media (min-width:1024px){
  .co-split{align-items:stretch}
  .co-split > .media-frame{aspect-ratio:auto;max-height:none;min-height:480px}
}
/* 번호 목록: 좁은 화면은 번호 칸을 줄여 설명 줄을 넓힌다 */
.co-numlist > li{grid-template-columns:32px minmax(0,1fr)}
@media (min-width:768px){.co-numlist > li{grid-template-columns:48px minmax(0,1fr)}}

/* 회사 소개 '사람들': 한 장의 넓은 사진 */
.co-team-photo{--ar:3 / 2}
@media (min-width:768px){.co-team-photo{--ar:21 / 9}}

/* 연구 '연구에서 서비스까지': 아이콘 칸 없이 번호로 시작한다. 이음선을 번호 줄 높이에, 칸마다 아래 목록의 선을 같은 높이에 */
.tech-pipeline .pipeline__list{margin-top:auto}
@media (min-width:1024px){
  .tech-pipeline .pipeline__step + .pipeline__step::before{top:34px}
  .tech-pipeline .pipeline__wire{top:33px}
}

/* 인재 채용 '일하는 방식': 번호를 회사 소개·연구의 번호 목록과 같은 모양(작고 굵은 강조색)으로 */
.careers-tenets .tenet__no{font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.careers-tenets .tenet__title{margin-top:var(--s-12)}

/* 인재 채용 사진 줄: 휴대폰은 첫 장을 넓게, 나머지 두 장을 나란히 */
@media (max-width:767px){
  .careers-photos .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-10)}
  .careers-photos .mosaic > :first-child{grid-column:1 / -1;--ar:3 / 2}
}

/* 회사 소개 '이름과 로고': 국문 로고 아래 영문 로고를 한 판에. 두 로고의 폭을 맞추고 이름표를 단다 */
.co-logos{gap:var(--s-48)}
.co-logo{display:grid;justify-items:center;gap:var(--s-16);width:min(560px,100%)}
.co-logo + .co-logo{padding-top:var(--s-48);border-top:1px solid var(--line)}
.co-logo__cap{color:var(--ink-muted);font-size:var(--t-caption);line-height:var(--t-caption-lh)}
@media (min-width:1024px){.co-logos{gap:var(--s-64)}.co-logo + .co-logo{padding-top:var(--s-64)}}