@charset "UTF-8";
/* =========================================================
   토스 리디자인 시안 — page-company.css (company.html 전용)
   style.css → sub.css 다음에 불러온다. 토큰·컴포넌트는 공용 파일 그대로 쓰고
   이 페이지에만 필요한 배치만 둔다.
     1. 토스가 하는 일 (큰 문장 + 정보 목록)
     2. 원칙 카드 (순서 번호)
     3. 서비스 카드 (화살표, 강조 숫자)
     4. 반응형
   ========================================================= */

/* ---------- 1. 토스가 하는 일 ---------- */
.co-statement { font-size: 3rem; line-height: 1.3; }
.co-mission .sub-lead { font-size: 1.25rem; }
.co-facts { margin-top: 40px; }
.co-facts .info-list__row { grid-template-columns: 140px minmax(0, 1fr); }
.co-facts dd { color: var(--grey-800); }
.co-facts__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  font-weight: 600;
  color: var(--blue-700);
  text-decoration: none;
}
.co-facts__link .ico { width: 18px; height: 18px; }
.co-facts__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 2. 원칙 카드 ---------- */
.co-principles .s-card { padding: 36px 32px 40px; }
.co-principles__num {
  position: absolute;
  top: 28px;
  right: 32px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--grey-600);
  font-variant-numeric: tabular-nums;
}
.co-principles .s-card__title { font-size: 1.75rem; }

/* ---------- 3. 서비스 카드 ---------- */
.co-accent { color: var(--blue-500); }
.co-svc .s-card { min-height: 220px; padding-bottom: 72px; }
.co-svc__arrow {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 24px;
  height: 24px;
  color: var(--grey-600);
  transition: transform .25s var(--ease), color .25s;
}
.co-svc .s-card--link:hover .co-svc__arrow,
.co-svc .s-card--link:focus-within .co-svc__arrow { color: var(--blue-500); transform: translateX(4px); }

/* ---------- 4. 반응형 ---------- */
@media (max-width: 1023px) {
  /* 영어 제목은 태블릿 폭에서 강제 줄바꿈 때문에 한 단어만 남는 줄이 생겨, 줄바꿈을 풀고 balance에 맡김 */
  html[lang="en"] .sub-hero__title br { display: none; }
  .co-statement { font-size: 2.25rem; }
  .co-mission .sub-lead { font-size: 1.125rem; }
  .co-facts { margin-top: 32px; }
  .co-facts .info-list__row { grid-template-columns: 120px minmax(0, 1fr); }
  .co-principles .s-card:last-child { grid-column: 1 / -1; }
  .co-svc .s-card { min-height: 200px; }
}

@media (max-width: 767px) {
  .co-statement { font-size: 1.75rem; }
  .co-mission .sub-lead { font-size: 1.0625rem; }
  .co-facts .info-list__row { grid-template-columns: 1fr; }
  .co-principles .s-card { padding: 28px 24px; }
  .co-principles .s-card:last-child { grid-column: auto; }
  .co-principles__num { top: 24px; right: 24px; }
  .co-principles .s-card__title { font-size: 1.375rem; }
  /* 서비스 카드: index 벤토 모바일처럼 아이콘 | 글 | 화살표 한 줄 */
  .co-svc .s-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    column-gap: 16px;
    align-items: center;
    min-height: 88px;
    padding: 20px;
  }
  .co-svc .s-card__icon { grid-row: 1 / span 2; }
  .co-svc .s-card__title { grid-column: 2; margin-top: 0; font-size: 1.125rem; }
  .co-svc .s-card__desc { grid-column: 2; margin-top: 2px; font-size: .9375rem; }
  .co-svc__arrow { position: static; grid-column: 3; grid-row: 1 / span 2; width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .co-svc .s-card--link:hover .co-svc__arrow,
  .co-svc .s-card--link:focus-within .co-svc__arrow { transform: none; }
}