/*
 * 04 / COMPANY: 회사 소개·로고 텍스트·기술 태그
 * 수정 위치: 04 / COMPANY의 INNO SYSTEM 워드마크·회사 소개·기술 태그.
 */

/* 1. COMPANY 섹션의 제목 크기와 본문 레이아웃 */
.company-grid h2 {
  font-size: 36px;
  letter-spacing: -1.6px;
  line-height: 1.4;
  margin-top: 16px;
}

/* 2. 회사 소개 전체 위아래 여백 */
.company-section {
  padding: 82px 0;
}

/* 회사명 왼쪽 / 회사 소개 오른쪽의 2열 배치 */
.company-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr; /* 왼쪽 회사명 : 오른쪽 소개 너비 비율 */
  gap: 60px;
  align-items: center;
}

/* INNO / SYSTEM. 대형 문자 로고의 크기와 자간 */
.company-wordmark {
  font-size: 66px; /* PC 대형 INNO SYSTEM 글자 크기 */
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -4px;
  margin-top: 30px;
}

/* 회사 소개 오른쪽 제목 아래 여백 */
.company-grid h2 {
  margin: 0 0 25px;
}

/* 회사 소개 문단 글자 크기 */
.company-grid > div > p:not(.eyebrow):not(.company-wordmark) {
  font-size: 14px;
  margin-top: 15px;
}

/* PLC · HMI · SERVO 같은 기술 키워드 나열 */
.company-tags {
  display: flex;
  gap: 27px;
  margin-top: 30px;
  font-size: 10px;
  letter-spacing: 1px;
}

/* 3. 태블릿(1050px 이하): 회사 소개 제목 축소 */
@media (max-width: 1050px) {
  .company-grid h2 {
      font-size: 30px;
  }
}

/* 모바일(760px 이하): 회사명과 설명을 위아래 1열로 구성 */
@media (max-width: 760px) {
  .company-grid h2 {
      font-size: 29px;
  }

  .company-section {
      padding: 60px 0;
  }

  .company-grid {
      grid-template-columns: 1fr;
      gap: 37px;
  }

  .company-wordmark {
      font-size: 55px;
  }

  .company-grid > div > p:not(.eyebrow):not(.company-wordmark) {
      font-size: 13px;
  }

  .desktop-break {
      display: none;
  }

  .company-tags {
      gap: 22px;
  }
}

/* 아주 작은 화면(360px 이하): 기술 태그 간격 축소 */
@media (max-width: 360px) {
  .company-tags {
      gap: 16px;
  }
}

/* 4. COMPANY 영역 배경 그라데이션·위아래 구분선 */
/* 아래부터는 COMPANY만 사용하는 배경·로고·텍스트 색상입니다. */
.company-section {
  border-block: 1px solid var(--glass-border);
  background: linear-gradient(
    110deg,
    rgba(30, 58, 138, 0.14),
    rgba(8, 145, 178, 0.04)
  );
}

/* INNO SYSTEM. 문자 로고 첫 줄 기본색 */
.company-wordmark {
  color: #eef4ff;
}

/* SYSTEM. 텍스트의 스카이블루 강조색 */
.company-wordmark span {
  color: var(--accent);
}

/* 회사 소개 문단의 보조 문자색 */
.company-grid > div > p:not(.eyebrow):not(.company-wordmark) {
  color: var(--text-sub);
}

/* 회사 기술 키워드의 스카이블루 강조색 */
.company-tags {
  color: var(--accent);
}