/*
 * 01 / WHAT WE DO: 자동제어·전기공사 대칭 카드, SVG 아이콘, 2×2 서비스 목록
 * 수정 위치: 01 / WHAT WE DO의 자동제어·전기제어 카드 2개와 하단 서비스 8개.
 */

/* 1. 사업분야 큰 카드 2개의 기본 가로 배치·여백. 최종 1:1 비율은 아래 4번에서 지정 */
.business-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr; /* 기존 기본값; 아래 repeat(2...)에서 1:1로 최종 변경 */
  gap: 22px;
}

.business-grid article {
  padding: 35px 38px;
}

/* 두 카드 위쪽의 OUR CORE EXPERTISE / FROM DESIGN TO SITE와 번호 01·02 정렬 */
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 카드 우측 상단의 01·02 번호 크기 */
.index {
  font-size: 16px;
}

/* 카드 제목(Automation Control / Electrical Engineering) 글꼴의 기본 크기 */
.business-grid h3 {
  font-size: 40px;
  letter-spacing: -1.4px;
  margin-top: 25px;
}

/* 카드 제목 아래 한국어 사업명: 프로그램·자동제어 / 전기제어·전기공사 */
.business-label {
  font-size: 17px;
  margin-top: 16px;
  font-weight: 700;
}

/* 사업명 아래 두 줄의 설명 문구 크기·간격 */
.muted {
  font-size: 13px;
  margin-top: 13px;
  line-height: 1.9;
}

/* 각 카드 하단 PROJECTS 섹션으로 이동하는 링크 */
.text-link {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

/* 태블릿 이하(1050px): 카드 내부 여백 축소 */
@media (max-width: 1050px) {
  .business-grid article {
      padding: 28px;
  }
}

/* 모바일 이하(760px): 대형 카드를 1열로 배치하고 제목 크기 축소 */
@media (max-width: 760px) {
  .business-grid {
      grid-template-columns: 1fr;
  }

  .business-grid h3 {
      font-size: 38px;
  }

  .business-grid article {
      padding: 27px;
  }

  .business-grid .muted br {
      display: none;
  }
}

/* 2. 카드별 글자색과 글래스·그라데이션 기본 테마 */
.muted {
  color: var(--text-sub);
}

/* 왼쪽 자동화 카드에 파란 빛을 더하는 기본 배경 */
.business-primary {
  background:
    radial-gradient(ellipse at 0 0, rgba(8, 145, 178, 0.16), transparent 70%),
    var(--glass-bg);
  border-color: rgba(56, 189, 248, 0.3);
}

/* 왼쪽 카드 제목 Control 강조색 */
.business-primary h3 span {
  color: var(--accent);
}

/* 오른쪽 전기제어 카드 제목 기본색 */
.business-secondary h3 {
  color: #e2e8f0;
}

/* 카드 우상단 숫자의 연한 블루그레이 */
.index {
  color: #90a7bd;
}

/* 카드 내 한국어 업무명 색상 */
.business-label {
  color: #d9e9f5;
}

/* 프로젝트 이동 링크의 스카이블루 강조색 */
.text-link {
  color: var(--accent);
}

/* 3. 아이콘용 SVG symbol 묶음을 화면에서는 보이지 않도록 숨김 */
/* 아래부터는 대칭형 카드와 2×2 서비스 목록의 최종 스타일입니다. */
.business-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 4. PC 카드 최종 너비: 왼쪽·오른쪽 1:1 대칭 (위의 1.35fr 1fr보다 이 규칙이 우선) */
.business-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* PC 좌우 큰 카드 1:1 너비 비율 */
  align-items: stretch;
}

/* 두 카드의 높이·안쪽 콘텐츠를 세로로 정렬하고 테두리 밖 요소는 잘라냄 */
.business-grid article {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 620px; /* PC 두 큰 카드의 최소 높이 */
}

/* 카드 배경의 희미한 회로선/신호 노드 장식 (실제 신호 동작은 없음) */
.business-grid article::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 38px;
  right: -40px;
  width: 360px;
  height: 300px;
  pointer-events: none;
  opacity: 0.16; /* 회로선 장식의 기본 투명도 */
  background:
    linear-gradient(90deg, transparent 33%, #38bdf8 33.3%, transparent 33.6%),
    linear-gradient(0deg, transparent 58%, #38bdf8 58.3%, transparent 58.6%),
    radial-gradient(circle at 33% 58%, #38bdf8 0 3px, transparent 4px),
    radial-gradient(circle at 74% 58%, #38bdf8 0 3px, transparent 4px),
    radial-gradient(circle at 33% 21%, #38bdf8 0 3px, transparent 4px);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 40%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent, black 40%, transparent 100%);
}

/* 회로선 장식보다 카드 글자·아이콘을 위에 표시 */
.business-grid article > * {
  position: relative;
  z-index: 1;
}

/* 자동제어 카드의 최종 배경색: 왼쪽 위에서 빛이 들어오는 형태 */
.business-grid .business-primary {
  border-color: rgba(56, 189, 248, 0.30);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(8, 145, 178, 0.16), transparent 74%),
    linear-gradient(135deg, #16293e, #172338);
}

/* 전기제어 카드의 최종 배경색: 오른쪽 위 블루 글로우 */
.business-grid .business-secondary {
  border-color: rgba(56, 189, 248, 0.20);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(30, 58, 138, 0.22), transparent 74%),
    linear-gradient(135deg, #18263f, #172338);
}

/* 5. 큰 영문 사업명 제목의 최종 크기·줄 간격 */
.business-grid h3 {
  font-size: 40px;
  line-height: 1.2;
}

/* Control / Engineering 두 번째 줄을 스카이블루로 표시 */
.business-grid h3 span {
  color: var(--accent);
}

/* 제목·설명 그룹과 하단 서비스 목록 사이 여백 */
.business-card-intro {
  margin-bottom: 35px;
}

/* 설명 문구의 최대 폭: 넓은 화면에서 글이 지나치게 길어지지 않도록 제한 */
.business-grid .muted {
  max-width: 480px;
}

/* 6. 서비스 4개를 2열 × 2행으로 정렬하는 그리드 */
.business-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 서비스 카드 2열(2×2 배열) */
  gap: 10px;
  margin-top: auto;
}

/* PLC Programming 등 각각의 작은 서비스 카드 크기·테두리·배경 */
.business-service {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  min-height: 104px; /* 작은 서비스 카드 최소 높이 */
  padding: 15px 13px;
  border: 1px solid rgba(149, 182, 215, 0.15);
  border-radius: 10px;
  background: rgba(5, 17, 34, 0.30);
}

/* 서비스 카드 왼쪽의 아이콘 배경 상자 크기 */
.business-service-icon {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(56, 189, 248, 0.23);
  border-radius: 7px;
  background: rgba(56, 189, 248, 0.075);
}

/* SVG 서비스 아이콘의 실제 선 굵기·크기·색 */
.business-service-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 서비스 카드 첫 줄의 이름(PLC Programming 등) */
.business-service strong {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #edf6ff;
  font-weight: 700;
}

/* 서비스 카드 둘째 줄의 상세 설명 */
.business-service small {
  display: block;
  font-size: 11px;
  line-height: 1.55;
  margin-top: 6px;
  color: var(--text-sub);
}

/* 7. 대형 카드 하단 프로젝트 이동 링크 및 가로 구분선 */
.business-grid .text-link {
  margin-top: 23px;
  padding-top: 18px;
  border-top: 1px solid rgba(149, 182, 215, 0.16);
  font-weight: 700;
}

/* 8. 태블릿(1050px 이하): 사업명과 서비스 카드의 내부 간격 축소 */
@media (max-width: 1050px) {
  .business-grid h3 {
      font-size: 35px;
  }

  .business-service {
      padding: 13px 10px;
      gap: 9px;
  }
}

/* 모바일(760px 이하): 2개 대형 카드를 세로로 쌓고 고정 높이 해제 */
@media (max-width: 760px) {
  .business-grid {
      grid-template-columns: 1fr;
  }

  .business-grid article {
      min-height: auto;
  }

  .business-card-intro {
      margin-bottom: 30px;
  }

  .business-grid article::before {
      top: 34px;
      right: -115px;
      width: 240px;
      height: 180px;
      opacity: 0.12;
  }

  .business-services {
      margin-top: 0;
  }
}

/* 작은 모바일(520px 이하): 2×2 작은 서비스 카드를 1열 목록으로 변경 */
@media (max-width: 520px) {
  .business-services {
      grid-template-columns: 1fr;
  }

  .business-service {
      min-height: 0;
      padding: 12px;
  }

  .business-grid h3 {
      font-size: 34px;
  }
}