/* /industries 전용 보정 — 플랫폼과 동일 패턴.
   우리 global.css의 body{font/color}가 나중에 주입되어 이기므로, 콘텐츠 컨테이너 #main(ID 특이도)로
   시안 폰트/색을 다시 못박는다. 제목류는 시안 style.css가 각자 Inter(var(--en))로 직접 지정하므로 유지된다. */
#main {
  font-family: var(--ko);
  color: var(--ink);
}

/* 히어로 — 플랫폼·컴퍼니와 통일: 배경 이미지 + 다크 스크림 + 좌측 정렬(가운데 정렬 해제). */
#main .hero {
  min-height: 350px;
  padding: 48px 0;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(5, 10, 20, 0.92) 0%, rgba(5, 10, 20, 0.78) 46%, rgba(5, 10, 20, 0.5) 100%),
    url("/value-industry/energy.jpg") center center / cover no-repeat;
}
#main .hero .hero-content {
  /* 플랫폼 히어로와 좌측 시작점 일치(데스크톱: 30px 인셋 + 25px 패딩 = 55px). */
  width: min(1660px, calc(100% - 60px));
  margin-inline: auto;
  padding-left: 25px;
  box-sizing: border-box;
  text-align: left;
}
#main .hero h1 {
  color: #ffffff;
}
#main .hero .hero-content > p {
  color: #7aa0ee;
}
#main .hero .hero-content > span {
  color: #b9c2d6;
}
@media (max-width: 720px) {
  #main .hero {
    min-height: 280px;
    padding: 36px 0;
  }
}

/* ───────────────────────────────────────────────────────────
   타이포/폰트 조정(요청). 시안 규칙을 #main 특이도로 덮는다.
   ─────────────────────────────────────────────────────────── */

/* 목업 영문 폰트(Inter)를 Noto Sans KR로 통일 */
:root {
  --en: 'Noto Sans KR', sans-serif;
}

/* 히어로 */
#main .hero-content > p {
  /* "INDUSTRIES" — 플랫폼 'Data Integration & AI Platform'과 동일 크기 */
  font-size: 28px;
}
#main .hero h1 {
  /* 프로젝트 페이지와 동일한 반응형 스케일 — 데스크톱 50px 유지, 모바일에서 28px까지 축소. */
  font-size: clamp(28px, 6.51vw, 50px);
}
#main .hero-content > span {
  font-size: 15px;
}

/* 상단 산업 탭 라벨 */
#main .section-nav a {
  font-size: 18px;
}

/* 각 산업 패널(6개 공통) */
#main .industry h2 {
  font-weight: 700;
}
#main .description {
  font-size: 18px;
}
#main .industry-copy li,
#main .tech span {
  font-size: 14px;
}

/* 산업 바로가기 탭은 스크롤해도 상단에 고정(sticky). SiteHeader(solid, 높이 5.625rem) 바로 아래에 붙는다. */
#main .section-nav {
  position: sticky;
  top: 5.625rem;
  z-index: 30;
}

/* 모바일: 콘텐츠 하단(마지막 산업 패널) → 푸터 사이 흰 여백을 플랫폼 페이지와 동일하게 40px로. */
@media (max-width: 767.98px) {
  #main .industries {
    padding-bottom: 40px;
  }

  /* 히어로 좌측 시작점을 플랫폼 모바일과 동일하게 16px로(인셋 16 + 패딩 0). */
  #main .hero .hero-content {
    width: calc(100% - 32px);
    padding-left: 0;
  }

  /* 히어로(첫 패널) 모바일 폰트: INDUSTRIES 16px · 제목 28px · 본문 13px. */
  #main .hero-content > p {
    font-size: 16px;
  }
  #main .hero h1 {
    font-size: 28px;
  }
  #main .hero-content > span {
    font-size: 13px;
  }
}