/* /platform 전용 보정.
   우리 global.css의 body{font-family:Pretendard; color:...} 가 시안 style.css의 body 규칙보다
   나중에 주입되어 이기므로, 콘텐츠 컨테이너 #main(ID 특이도)로 시안 폰트/색을 다시 못박는다.
   #main(0,1,0) > body(0,0,1) 이라 로드 순서와 무관하게 적용된다.
   제목류(h1·h2·h3 등)는 시안 style.css가 각자 Inter(var(--en))로 직접 지정하므로 그대로 유지된다. */
#main {
  font-family: var(--font);
  color: var(--ink);
}

/* 아키텍처 다이어그램 — 비율 왜곡 없이 통째로 축소해 한 화면에 담는다.
   zoom은 퍼센트 폭 + 고정폭(입력/출력) 열이 섞여 열 비율이 틀어지므로(찌그러짐) 쓰지 않는다.
   대신 아래 스크립트가 레이아웃 후 transform: scale로 '균일' 축소한다. 여기선 세로 여백만 조금 줄인다. */
@media (min-width: 1101px) {
  #main .full-architecture {
    padding-top: 40px;
    padding-bottom: 28px;
  }
  #main .full-architecture .architecture-heading {
    margin-bottom: 14px;
  }
}
/* 균일 축소용 래퍼 — 스크립트가 map에 transform: scale를 걸고, 래퍼 높이를 축소된 높이로 맞춰 아래 여백을 없앤다. */
.arch-fit {
  overflow: hidden;
}
#main .full-architecture .arch-fit .system-map {
  transform-origin: top center;
}

/* 아키텍처 제목("RTMeta X · Platform Architecture" + 소제목 줄)을 가운데 정렬한다.
   원본은 flex + space-between이라 왼쪽에 붙는다. */
#main .full-architecture .architecture-heading {
  justify-content: center;
  text-align: center;
}

/* 플랫폼 코어(업로드 이미지 영역) 볼드 해제 — 섹션 제목·박스 라벨을 볼드(700·800)에서 미디엄(500)으로. */
#main .full-architecture .platform-core .core-title h3,
#main .full-architecture .platform-core b {
  font-weight: 500;
}

/* 아키텍처 배경 영상이 너무 어두워 보정 — 영상 더 밝고 선명하게, 위에 덮인 다크 스크림은 옅게. */
#main .full-architecture .architecture-bg-video {
  opacity: 0.6;
  filter: saturate(0.92) contrast(1.03) brightness(1);
}
#main .full-architecture::after {
  background: linear-gradient(
    180deg,
    rgba(8, 13, 23, 0.5) 0%,
    rgba(8, 13, 23, 0.32) 48%,
    rgba(8, 13, 23, 0.55) 100%
  );
}

/* ───────────────────────────────────────────────────────────
   타이포/폰트 조정(요청). 시안 규칙이 여러 겹 덮여 있어 #main 특이도로 최종값을 못박는다.
   ─────────────────────────────────────────────────────────── */

/* 폰트 통일 → Noto Sans KR. 본문/헤더/푸터는 global.css에서 전역 통일하고,
   여기선 시안 목업이 쓰는 var(--en)(Inter)만 Noto로 치환한다. */
:root {
  --en: 'Noto Sans KR', sans-serif;
}

/* 히어로 하단 노드(DataAI·Doctor)가 'Platform Architecture' 카드에 가려지지 않도록,
   카드가 히어로로 파고드는 겹침(-30px)을 제거해 카드를 히어로 아래로 내린다. */
#main .architecture {
  margin-top: 0;
}

/* 히어로(첫 패널) 배경 배너 — contain은 상하 검은 여백(레터박스)이 생겼다.
   cover로 히어로를 꽉 채우되, object-position:right로 '잘리는 쪽'을 왼쪽 빈 물결 영역으로 몰아
   오른쪽 RTMeta X 다이어그램(노드 전부)은 그대로 보이게 한다. */
#main .hero .hero-motion {
  display: block;
}
#main .hero .hero-motion img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
}
/* 모바일: 기본(right)은 배경 다이어그램의 Doctor 노드가 보인다.
   RTMeta X 칩(이미지 가로 ~76% 지점)이 화면 가운데 오도록 위치를 왼쪽으로 옮긴다. */
@media (max-width: 767.98px) {
  #main .hero .hero-motion img {
    object-position: 84% center;
  }
}

/* SOLUTION ECOSYSTEM(카드) 섹션 */
#main .section-title > span {
  font-size: 20px;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #00A651 0%, #0BA4A0 50%, #2563EB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
#main .section-title h2 {
  font-size: 32px;
  font-weight: 700;
}
#main .section-title p {
  font-size: 20px;
}

/* 카드 '자세히 보기' 구분선과 위 태그 사이 간격 확보(겹침 방지) */
#main .card .tags {
  margin-bottom: 18px;
}

/* 구성도(Platform Architecture) */
#main .architecture-heading h2 {
  font-size: 32px;
  font-weight: 700;
}
#main .industry-bar b {
  font-size: 20px;
  font-weight: 600;
}

/* WHY RTMETA X 섹션 (설명문단 삭제로 단일 컬럼 → 제목 한 줄 확보) */
#main .diff-heading {
  grid-template-columns: 1fr;
}
#main .diff-heading span {
  font-size: 24px;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #00A651 0%, #0BA4A0 50%, #2563EB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
#main .diff-heading h2 {
  font-size: 38px;
  font-weight: 700;
}
#main .diff-body > span {
  font-size: 16px;
}
#main .diff-grid h3 {
  font-size: 24px;
  font-weight: 700;
}
#main .diff-grid p {
  font-size: 16px;
  font-weight: 500;
}