/* 전체 페이지: 색상·폰트·간격·그림자·전환 등 공통 CSS 변수 정의 */
:root {
  --color-bg: #1f4f80;
  --color-text: #ffffff;
  --color-accent: #dca11c;
  --color-accent-soft: #ffc94d;
  --color-subtle: #def2ff;
  --color-surface: #295f96;
  --color-surface-alt: #17385c;
  --color-border-soft: rgba(222, 242, 255, 0.3);

  --max-width: 1120px;

  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-0: 0;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.25);

  --transition-fast: 160ms ease-out;
  --transition-med: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 전체 요소: 박스 사이징 초기화 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* HTML 요소: 부드러운 스크롤 및 고정 헤더 오프셋 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: clip;
}

/* 전체 페이지 배경: 진한 파란색 방사형 그라데이션 및 기본 폰트·글자색 */
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--font-family-base);
  color: var(--color-text);
  background: radial-gradient(circle at top left, #295f96 0, #1f4f80 40%, #102a45 100%);
  line-height: 1.6;
}

/* 미디어 요소(마스코트 이미지 등): 반응형 처리 */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 접근성 전용 숨김 요소: 언어 선택 레이블 등 화면 리더용 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Layout */

/* [공통] 광고 영역 포함 3열 페이지 레이아웃 */
.page-main {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  column-gap: var(--space-4);
  align-items: stretch;
  width: 100%;
}

.content-main {
  grid-column: 2;
  min-width: 0;
}

.sidebar {
  min-width: 0;
  padding-top: var(--space-4);
}

.sidebar .adsbygoogle {
  min-height: 280px;
}

.mobile-ad {
  display: none;
}

.mobile-ad .adsbygoogle {
  min-height: 220px;
}

.sidebar-left {
  grid-column: 1;
  grid-row: 1;
}

.sidebar-right {
  grid-column: 3;
  grid-row: 1;
}

/* [공통] 모든 섹션 콘텐츠 최대 너비 1120px 및 중앙 정렬 */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* [공통] 플랫폼 소개·기술·활용사례·서비스 섹션 공통 여백·배경·글자색 */
.section {
  padding: var(--space-16) 0;
  background-color: #ffffff; /* 기본 본문 영역은 백색 */
  color: #1a202c; /* 본문 글자색은 어두운 톤 */
  position: relative;
  border-top: 1px solid #e2e8f0; /* 깔끔한 수평 영역 구분선 유지 */
}

/* [공통] 본문 섹션 사선 효과 제거 (흰색 배경에 불필요) */
.section::before {
  display: none; /* 본문 섹션의 사선 효과 제거 유지 */
}

/* [히어로] 히어로 섹션 사선 효과 제거 */
#hero::before {
  display: none;
}

/* [플랫폼 소개·활용사례] 짝수 섹션 배경: 약간 밝은 회색으로 구분감 부여 */
.section-alt {
  background-color: #f8fafc; /* 약간의 차이를 주어 구분감 부여 */
}

/* Header */

/* [헤더] 상단 고정 헤더 (스크롤 시 반투명 블러 고정) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: linear-gradient(
    to bottom,
    rgba(7, 21, 40, 0.95),
    rgba(7, 21, 40, 0.75),
    transparent
  );
  border-bottom: 1px solid rgba(222, 242, 255, 0.15);
}

/* [헤더] 내부 레이아웃: 로고·내비게이션·언어 선택 가로 정렬 */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

/* [헤더] 브랜드 로고 링크: 마스코트 이미지 + "AhriRAG" 텍스트 묶음 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}

/* [헤더] 이미지 미사용 시 대체 텍스트 브랜드 마크 */
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 40% 60% 55% 45%;
  background: radial-gradient(circle at 30% 20%, #ffe8a3, #dca11c);
  color: #1b2740;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  font-size: 20px;
}

/* [헤더] 마스코트 상체 이미지 (아리 상체 누끼) */
.brand-mark-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}

/* [헤더] 브랜드명 "AhriRAG" + 태그라인 텍스트 세로 배치 컨테이너 */
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* [헤더] 브랜드명 "AhriRAG" 굵은 흰색 텍스트 */
.brand-name {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 17px;
}

/* [헤더] 서비스 태그라인 (예: "RAG 기반 AI 솔루션") 소형 흐린 텍스트 */
.brand-tagline {
  font-size: 12px;
  color: var(--color-subtle);
  opacity: 0.9;
}

/* Nav */

/* [헤더] 내비게이션: 플랫폼·기술·활용사례·서비스 링크 오른쪽 정렬 */
.main-nav {
  display: flex;
  gap: var(--space-4);
  font-size: 14px;
  margin-left: auto;
}

/* [헤더] 내비 링크 기본 스타일 (흰색 텍스트, 둥근 모서리) */
.main-nav a {
  color: var(--color-subtle);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

/* [헤더] 내비 링크 호버 시 빛 번짐 효과 (의사 요소) */
.main-nav a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(255, 229, 154, 0.4), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* [헤더] 내비 링크 호버·포커스 강조 (황금 배경, 어두운 글자) */
.main-nav a:hover,
.main-nav a:focus-visible {
  color: #0b1727;
  background: var(--color-accent);
  transform: translateY(-1px);
}

/* [헤더] 내비 링크 호버·포커스 시 빛 효과 표시 */
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  opacity: 1;
}

/* Language switcher */

/* [헤더] 언어 선택 영역 (KO / EN 전환) 오른쪽 배치 */
.lang-switcher {
  display: flex;
  align-items: center;
  margin-left: var(--space-4);
}

/* [헤더] 언어 선택 드롭다운 스타일 (어두운 배경, 둥근 테두리) */
.lang-switcher select {
  background: rgba(9, 25, 46, 0.95);
  color: var(--color-subtle);
  border-radius: 999px;
  border: 1px solid rgba(222, 242, 255, 0.25);
  padding: 6px 12px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* [헤더] 언어 선택 드롭다운 호버·포커스 시 황금색 테두리 강조 */
.lang-switcher select:hover,
.lang-switcher select:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px rgba(220, 161, 28, 0.5);
}

/* HERO */



/* [히어로] 마스코트 전신 이미지 크기 (아리 본체 누끼, 120px) */
.hero-mascot img {
  width: clamp(96px, 28vw, 300px);
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
  display: block;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0px; /* 기존 32px보다 줄임 */
}

/* [반응형] 소형 모바일(600px): 히어로 마스코트 이미지 72px로 축소 */
@media (max-width: 600px) {
  .hero-mascot img {
    width: clamp(88px, 42vw, 180px);
  }
}

/* [히어로] 히어로 섹션 패딩 및 배경 (body 그라데이션 사용) */
.hero {
  padding-top: var(--space-0);
  padding-bottom: var(--space-8);
  background: transparent; /* body의 그라데이션 사용 */
  color: var(--color-text);
}

/* [히어로] 히어로 텍스트 콘텐츠 중앙 정렬 컨테이너 */
.hero-content {
  text-align: center;
  max-width: 900px;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0px; /* 기존 32px보다 줄임 */

}

/* [히어로] 대형 강조 문구 (예: "AhriRAG" 황금색 초대형 텍스트) */
.hero-kicker {
  font-size: clamp(44px, 9vw, 88px); /* 화면 폭에 맞춰 자연스럽게 축소 */
  font-weight: 800; /* 폰트를 더 두껍게 */
  color: var(--color-accent); /* 강조 색상 적용 */
  margin-top: 0;
  margin-bottom: 0; /* 타이틀과의 간격 조절 */
  line-height: 0.7;
  letter-spacing: 0.05em; /* 자간 조정 */
  text-transform: none; /* 대문자 변환 제거 */
}

/* [히어로] 메인 타이틀 (예: "기업 맞춤형 RAG AI 솔루션") 한 줄 고정 */
.hero h1 {
  font-size: clamp(22px, 4.5vw, 42px); /* 모바일 폭에 맞춰 축소 */
  line-height: 1.15;
  margin: var(--space-4) 0 var(--space-6);
  font-weight: 800; /* 폰트를 더 두껍게 */
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* [히어로] 서비스 부제 설명문 (흰색 계열 큰 텍스트) */
.hero-lead {
  font-size: clamp(15px, 2.8vw, 24px); /* 모바일 폭에 맞춰 축소 */
  color: var(--color-subtle);
  max-width: 50rem; /* 최대 너비 증가 */
  margin: 0 auto var(--space-8); /* 중앙 정렬 및 아래쪽 여백 증가 */
  text-align: center;
  overflow-wrap: anywhere;
}

/* [히어로] 주요 특징 배지 목록 (가로 나열, 줄바꿈 허용) */
.hero-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 플렉스 박스 사용 */
  flex-direction: row; /* 가로로 나열 */
  flex-wrap: wrap; /* 공간 부족 시 줄바꿈 */
  justify-content: center; /* 중앙 정렬 */
  gap: var(--space-3); /* 항목 간 간격 조정 */
  font-size: 16px; /* 폰트 크기 조정 */
  max-width: 60rem; /* 목록 자체의 최대 너비 제한 */
  margin: 0 auto; /* 목록 중앙 정렬 */
}

/* [히어로] 주요 특징 배지 개별 항목 (어두운 반투명 둥근 박스) */
.hero-highlights li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 8px 16px; /* 패딩 조정 */
  border-radius: var(--radius-pill);
  background: rgba(18, 47, 82, 0.9);
  border: 1px solid rgba(222, 242, 255, 0.16);
  overflow-wrap: anywhere;
}

/* [히어로] 배지 앞 황금색 원형 점 마커 */
.hero-highlights li::before {
  content: "";
  width: 8px; /* 마커 크기 조정 */
  height: 8px; /* 마커 크기 조정 */
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow: 0 0 0 7px rgba(220, 161, 28, 0.25); /* 그림자 크기 조정 */
}

/* Button */

/* [공통] CTA 버튼 (황금색 그라데이션 둥근 버튼) */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: #141824;
  background: linear-gradient(135deg, var(--color-accent), #ffe6a3);
  text-decoration: none;
  box-shadow: 0 13px 25px rgba(0, 0, 0, 0.38);
  transform: translateY(0);
  transition:
    transform var(--transition-med),
    box-shadow var(--transition-med),
    filter var(--transition-med);
}

/* [공통] CTA 버튼 호버·포커스 시 위로 올라오며 그림자 강조 */
.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.45);
  filter: brightness(1.02);
}

/* Section header */

/* [공통] 각 섹션("플랫폼 소개"·"기술"·"활용사례"·"서비스") 상단 제목 영역 컨테이너 */
.section-header {
  max-width: 900px;
  margin: 0 auto var(--space-16);
  text-align: center; /* 제목 중앙 정렬 */
  display: flow-root; /* 마진 병합(Margin Collapsing) 방지 */
}

/* [공통] 각 섹션 대형 강조 타이틀 ("플랫폼 소개", "기술", "활용사례", "서비스") */
.section-kicker {
  font-size: clamp(24px, 3.8vw, 42px) !important; /* HERO 타이틀 크기와 연동 */
  font-weight: 800;
  color: #5980b5 !important; /* 요청하신 새로운 강조 색상 직접 적용 */
  background-color: transparent;
  margin-top: var(--space-2) !important; /* 위쪽 구분선과의 간격 */
  margin-bottom: var(--space-4);
  letter-spacing: -0.03em;
  text-transform: none;
  display: block;
}

/* [공통] 각 섹션 부제목 h2 (예: "핵심 기술 스택", "도입 사례") */
.section-header h2 {
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  font-weight: 800;
  color: #111827;
}

/* [공통] 각 섹션 상세 설명문 (회색 소형 텍스트) */
.section-desc {
  margin: var(--space-4) auto 0;
  font-size: 16px !important; /* 설명글 크기 고정 */
  max-width: 800px;
  color: #4a5568;
  line-height: 1.6;
}

/* Cards & grids */

/* [플랫폼 소개·고급 기술] 2열 카드 그리드 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

/* [기술] 하위 소주제(LLM·벡터·파이프라인 등) 3열 카드 그리드 */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

/* [플랫폼 소개·기술] 흰색 카드 박스 (기본 스타일) */
.card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid #e2e8f0;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03),
    0 0 0 1px rgba(31, 79, 128, 0.03);
  color: #1a202c;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}

/* [플랫폼 소개·기술] 카드 상단 파란 강조선 */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1f4f80 0%, #5980b5 100%);
}

/* [플랫폼 소개·기술] 카드 호버 시 위로 올라오며 그림자 강조 */
.card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(31, 79, 128, 0.08);
}

/* [기술] 소형 카드 변형 (패딩 축소, 기술 섹션 3열 카드에 사용) */
.card-compact {
  padding: var(--space-4);
}

/* [플랫폼 소개·기술] 카드 내 소제목 h3·h4 (파란색 중앙 정렬) */
.card h3,
.card h4 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  color: #1f4f80;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  position: relative;
  padding-bottom: var(--space-3);
}

/* [플랫폼 소개·기술] 카드 소제목 아래 황금색 짧은 밑줄 장식 */
.card h3::after,
.card h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #dca11c, #ffc94d);
  border-radius: 2px;
}

/* [플랫폼 소개·기술] 카드 내 기능·항목 목록 (숫자·불릿 없는 스타일) */
.feature-list,
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #4a5568;
}

/* [플랫폼 소개·기술] 목록 항목 하단 구분선 포함 스타일 */
.feature-list li,
.bullet-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid #f1f5f9;
  transition: background var(--transition-fast);
}

/* [플랫폼 소개·기술] 목록 마지막 항목 구분선 제거 */
.feature-list li:last-child,
.bullet-list li:last-child {
  border-bottom: none;
}

/* [플랫폼 소개·기술] 목록 항목 호버 시 연한 파란 배경 효과 */
.feature-list li:hover,
.bullet-list li:hover {
  background: linear-gradient(90deg, rgba(31, 79, 128, 0.03), transparent);
  margin: 0 calc(var(--space-3) * -1);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  border-radius: var(--radius-sm);
}

/* [플랫폼 소개·기술] 연속 목록 항목 간 마진 초기화 */
.feature-list li + li,
.bullet-list li + li {
  margin-top: 0;
}

/* Subsection */

/* [기술] 하위 소주제 묶음 (LLM 계층·벡터 검색·문서 처리·프롬프트 엔지니어링·인프라 등) */
.subsection {
  margin-top: var(--space-10);
}

/* [기술] 하위 소주제 제목 h3 (예: "LLM 및 임베딩 계층") */
.subsection h3 {
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  font-weight: 800;
  color: #111827;
  text-align: center;
}

/* [기술] 연속된 하위 소주제 간 상단 여백 확보 */
.subsection + .subsection {
  position: relative;
  margin-top: var(--space-12);
  padding-top: var(--space-10);
}

/* [기술] 연속된 하위 소주제 사이 얇은 중앙 구분선 */
.subsection + .subsection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
}

/* [기술] "인프라 및 배포"·"고급 기술 기능" 앞 강조 구분 여백 */
.subsection-divider + .subsection {
  position: relative;
  margin-top: var(--space-12);
  padding-top: var(--space-10);
}

/* [기술] "인프라 및 배포"·"고급 기술 기능" 앞 굵은 파란 구분선 */
.subsection-divider + .subsection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: #1f4f80;
  border-radius: 1px;
}

/* Comparison table */

/* [기술] "기존 방식 vs AhriRAG" 비교표 감싸는 영역 (가로 스크롤 대응) */
.comparison-table-wrapper {
  margin-top: var(--space-5);
  overflow-x: auto;
}

/* [기술] "기존 방식 vs AhriRAG" 비교표 전체 스타일 */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  color: #1a202c;
}

/* [기술] 비교표 셀 패딩 및 하단 구분선 */
.comparison-table th,
.comparison-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}

/* [기술] 비교표 헤더 행 배경·텍스트 */
.comparison-table th {
  text-align: left;
  background: #f7fafc;
  color: #2d3748;
}

/* [기술] 비교표 짝수 행 배경 (가독성 향상) */
.comparison-table tbody tr:nth-child(even) {
  background: #fcfcfc;
}

/* Use cases */

/* [활용사례] 활용사례 카드 3열 그리드 */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

/* [활용사례] 활용사례 카드 (예: 금융·의료·제조·공공 등 산업별 사례) */
.usecase-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  color: #1a202c;
}

/* [활용사례] 활용사례 카드 제목 (예: "금융·보험", "의료·헬스케어") */
.usecase-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-2);
  font-size: 18px;
}

/* [활용사례] 활용사례 카드 내 항목 간격 축소 */
.usecase-card .bullet-list li {
  padding: var(--space-1) 0;
}

/* [활용사례] 활용사례 카드 내 산업군 부제목 (회색 소형 텍스트) */
.usecase-subtitle {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  color: #718096;
}

/* [활용사례] 업종 배지 (예: "금융", "의료", "제조" 태그) */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: #edf2f7;
  border: 1px solid #cbd5e0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #4a5568;
  margin-bottom: var(--space-2);
}

/* [활용사례] 활용사례 카드 하단 보조 배지 변형 (더 어두운 배경) */
.pill-alt {
  margin-top: var(--space-3);
  background: #e2e8f0;
}

/* Services */

/* [서비스] 서비스 항목 3열 그리드 레이아웃 */
.service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

/* [서비스] 서비스 카드 항목 (아이콘·이름·링크 세로 중앙 정렬) */
.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  border-radius: var(--radius-lg);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  color: #1f4f80;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

/* [서비스] 서비스 카드 호버·포커스 시 위로 올라오며 황금 테두리 강조 */
.service-item:hover,
.service-item:focus-visible {
  background: #f7fafc;
  transform: translateY(-8px);
  border-color: var(--color-accent);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* [서비스] 서비스 카드 아이콘 이미지 (100×100px) */
.service-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: var(--space-4);
}

/* [서비스] 서비스 카드 이름 텍스트 (파란색 굵은 글씨) */
.service-name {
  font-weight: 700;
  font-size: 20px;
}

/* [서비스] 서비스 카드 하단 링크 텍스트 (회색 소형 글씨) */
.service-link {
  font-size: 13px;
  color: #718096;
}

/* Footer */

/* [푸터] 하단 푸터 전체 (회사 정보·저작권, 어두운 네이비 배경) */
.site-footer {
  padding: var(--space-16) 0 var(--space-4);
  background: radial-gradient(circle at bottom, #081120, #050b14);
  font-size: 13px;
  position: relative;
  margin-top: 60px;
}

/* [푸터] 푸터 상단 사선 장식 (삼각형 클리핑으로 자연스러운 전환) */
.site-footer::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 61px;
  background: #060c18; /* 푸터 상단과 이어지는 색상 */
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 1;
}

/* [푸터] 내부 레이아웃: 회사 정보(왼쪽)·저작권(오른쪽) 가로 배치 */
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  align-items: flex-start;
}

/* [푸터] 컬럼 소제목 (예: "회사 소개" 등) 상단 마진 제거 */
.footer-col h3 {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

/* [푸터] 회사명 텍스트 (예: "비엔에스(BNS)") */
.footer-company-name {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

/* [푸터] 링크 스타일 (www.bns.co.kr, mda.bns.co.kr 등) */
.site-footer a {
  color: var(--color-subtle);
  text-decoration: none;
}

/* [푸터] 링크 호버·포커스 시 밑줄 표시 */
.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
}

/* [푸터] 우측 개발사·저작권 정보 (오른쪽 정렬) */
.footer-meta {
  text-align: right;
  color: var(--color-subtle);
}

/* Responsive */

/* [반응형] 노트북 이하(1024px): 광고 영역 숨기고 콘텐츠 1열 표시 */
@media (max-width: 1024px) {
  .page-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-main {
    grid-column: 1;
  }

  .sidebar {
    display: none;
  }

  .mobile-ad {
    display: block;
    padding: var(--space-4);
    background: #f8fafc;
  }
}

/* [반응형] 태블릿 이하(960px): 그리드 2열 축소, 푸터 세로 배치 */
@media (max-width: 960px) {
  .hero-inner {
    justify-content: flex-start;
  }

  /* [기술·서비스] 태블릿에서 3열 → 2열 */
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* [활용사례] 태블릿에서 3열 → 2열 */
  .usecase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* [푸터] 태블릿에서 가로 배치 → 세로 배치 */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* [푸터] 태블릿에서 저작권 정보 왼쪽 정렬로 변경 */
  .footer-meta {
    text-align: left;
  }
}

/* [반응형] 모바일 이하(720px): 헤더 줄바꿈, 그리드 1열, 섹션 여백 축소 */
@media (max-width: 720px) {
  /* [헤더] 모바일에서 헤더 요소 줄바꿈 허용 */
  .header-inner {
    flex-wrap: wrap;
  }

  /* [헤더] 모바일에서 브랜드 로고 아래 여백 추가 */
  .brand {
    margin-bottom: var(--space-2);
  }

  /* [헤더] 모바일에서 내비게이션 두 번째 줄로 이동 */
  .main-nav {
    order: 2;
    margin-top: var(--space-2);
    flex-wrap: wrap;
  }

  /* [헤더] 모바일에서 언어 선택 세 번째 줄로 이동 */
  .lang-switcher {
    order: 3;
    margin-left: 0;
  }

  /* [플랫폼 소개·기술·활용사례] 모바일에서 모든 그리드 1열 */
  .grid-2,
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* [활용사례] 모바일에서 1열 */
  .usecase-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* [공통] 모바일에서 섹션 여백 축소 */
  .section {
    padding: var(--space-12) 0 var(--space-10);
  }

  /* [히어로] 모바일에서 히어로 상단 여백 축소 */
  .hero {
    padding-top: var(--space-4);
    padding-bottom: var(--space-6);
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-kicker {
    line-height: 0.9;
  }

  .hero-lead {
    margin-bottom: var(--space-6);
  }

  .hero-highlights {
    align-items: center;
  }

  .hero-highlights li {
    justify-content: center;
    text-align: center;
  }

  /* [서비스] 모바일에서 서비스 목록 1열 */
  .service-list {
    grid-template-columns: 1fr;
  }

  /* [서비스] 모바일에서 서비스 카드 중앙 정렬 */
  .service-item {
    align-items: center;
  }
}