/* ==========================================================================
   CSS Reset & Base Variables (기본 초기화 및 전역 스타일 토큰 설정)
   ========================================================================== */

/* :root 가상 클래스는 CSS 변수(커스텀 프로퍼티)를 선언하여 프로젝트 전반에서 재사용할 수 있게 만드는 영역입니다. */
:root {
  /* Slate(회색조) 계열의 컬러 토큰을 정의하여 차분하고 신뢰감 있는 분위기를 연출합니다. */
  --slate-50: #f8fafc;   /* 매우 밝은 회색. 카드 호버나 옅은 배경 영역에 사용됩니다. */
  --slate-100: #f1f5f9;  /* 연한 회색. 얇은 구분선이나 서브 배경 영역에 사용됩니다. */
  --slate-200: #e2e8f0;  /* 경계선 회색. 기본 카드 테두리 및 입력 폼 경계선에 사용됩니다. */
  --slate-300: #cbd5e1;  /* 강조 경계선 회색. 호버 상태의 테두리선 등에 사용됩니다. */
  --slate-400: #94a3b8;  /* 연한 본문 회색. 푸터 링크 등에 사용됩니다. */
  --slate-500: #64748b;  /* 부드러운 회색. 설명이나 메타 정보 텍스트에 사용됩니다. */
  --slate-600: #475569;  /* 본문 보조 텍스트 회색. 설명문이나 리드 텍스트에 사용됩니다. */
  --slate-800: #1e293b;  /* 짙은 본문 차콜. 눈의 피로를 낮추는 메인 텍스트 컬러입니다. */
  --slate-900: #0f172a;  /* 진한 네이비 블랙. 헤드라인 및 푸터 배경에 사용됩니다. */

  /* IT 자동화 외주 에이전시 컨셉에 맞추어 신뢰도 높은 블루 컬러를 단일 강조색으로 지정합니다. */
  --accent-blue: #2563eb;      /* 메인 테크 블루. 버튼, 하이라이트, 액션 유도 영역에 사용됩니다. */
  --accent-blue-hover: #1d4ed8;/* 호버 블루. 버튼 마우스 오버 시 한 단계 어두운 색상으로 전환합니다. */
  --accent-blue-soft: #eff6ff; /* 연한 블루. 배지 배경이나 미니 팁 영역에 사용됩니다. */

  /* 레이아웃의 최대 너비를 1200px로 제한하여 대형 모니터에서도 화면이 퍼지지 않게 제어합니다. */
  --max-width: 1200px;
  /* 카드 및 주요 컴포넌트의 테두리 둥글기 값을 12px로 통일하여 현대적인 정합성을 부여합니다. */
  --radius: 12px;
}

/* 모든 요소(*)와 가상 요소의 패딩, 보더가 너비 계산에 포함되도록 box-sizing을 border-box로 고정합니다. */
*, *::before, *::after {
  box-sizing: border-box; /* 패딩을 추가해도 전체 가로폭이 늘어나지 않게 설정합니다. */
}

/* 브라우저 화면의 스크롤 동작이 링크 클릭 이동 시 부드럽게 흘러가도록 설정합니다. */
html {
  scroll-behavior: smooth; /* 앵커 링크 클릭 시 부드러운 스크롤 애니메이션을 부여합니다. */
}

/* body 태그에 전역 폰트 및 라인 높이, 단어 줄바꿈 규칙을 적용하여 가독성을 높입니다. */
body {
  margin: 0; /* 브라우저 기본 마진을 제거하여 화면 끝까지 레이아웃이 닿게 합니다. */
  color: var(--slate-800); /* 메인 텍스트 컬러를 Slate 800으로 설정합니다. */
  background: #ffffff; /* 기본 배경색을 깨끗한 흰색으로 지정합니다. */
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* 한글 최적화 본문 글꼴입니다. */
  font-size: 15px; /* 본문 폰트 크기를 형님의 취향인 15px 전후에 맞춰 지정합니다. */
  line-height: 1.65; /* 글줄 사이 여백을 1.65배로 두어 가독성을 높입니다. */
  word-break: keep-all; /* 한글 단어가 중간에 끊기지 않고 어절 단위로 떨어지게 만듭니다. */
  overflow-wrap: break-word; /* 지나치게 긴 영문 단어가 레이아웃 밖으로 삐져나가지 않게 차단합니다. */
  text-wrap: pretty; /* 브라우저가 문단 끝 줄바꿈을 균형 있게 조정하도록 만듭니다. */
}

/* 모든 링크(a) 요소의 기본 밑줄을 없애고 텍스트 컬러를 상위에서 상속받도록 처리합니다. */
a {
  color: inherit; /* 부모 요소의 글자색을 그대로 상속받습니다. */
  text-decoration: none; /* 기본 밑줄 장식을 제거합니다. */
}

/* 이미지 및 SVG의 최대 가로폭을 부모 요소에 맞춰 반응형으로 작동하도록 제어합니다. */
img, svg {
  max-width: 100%; /* 부모 크기보다 커지지 않게 제한합니다. */
  display: block; /* 하단의 미세한 여백 공간이 생기지 않도록 블록화합니다. */
}

/* 양식 요소들의 글꼴 속성이 시스템 기본값 대신 전역 스타일을 따라가도록 지정합니다. */
button, input, select, textarea {
  font: inherit; /* body에 설정된 Pretendard 폰트 패밀리와 크기를 상속받습니다. */
}


/* ==========================================================================
   Header & Navigation (상단 네비게이션 영역)
   ========================================================================== */

/* 상단 헤더 영역을 스크롤 시 화면 상단에 고정되게 만들고 옅은 블러 배경을 얹습니다. */
.site-header {
  position: sticky; /* 스크롤 시 상단에 딱 붙도록 위치를 고정합니다. */
  top: 0; /* 최상단 위치를 0으로 고정합니다. */
  z-index: 50; /* 페이지 콘텐츠보다 위에 오도록 레이어 순위를 높입니다. */
  background: rgba(255, 255, 255, 0.9); /* 90% 투명도로 설정해 투명 감각을 줍니다. */
  backdrop-filter: blur(8px); /* 뒤쪽의 본문이 필터 처리되어 겹쳐 보이게 하는 블러 효과입니다. */
  border-bottom: 1px solid var(--slate-100); /* 얇은 경계선을 주어 구획을 분할합니다. */
}

/* 헤더 내부의 실제 링크와 로고를 배치하는 컨테이너입니다. */
.nav {
  max-width: var(--max-width); /* 최대 가로폭을 1200px로 제한합니다. */
  margin: 0 auto; /* 좌우 마진을 자동으로 주어 화면 중앙에 배치합니다. */
  padding: 0 24px; /* 좌우 여백을 24px 주어 가장자리에 붙지 않게 합니다. */
  min-height: 72px; /* 헤더의 최소 높이를 72px로 유지합니다. */
  display: flex; /* 가로 배열 레이아웃으로 플렉스박스를 활성화합니다. */
  align-items: center; /* 세로축 정렬을 중앙으로 맞춥니다. */
  justify-content: space-between; /* 브랜드 로고와 링크를 양 끝으로 배치합니다. */
  gap: 24px; /* 요소들 간 최소 간격을 24px로 둡니다. */
}

/* 브랜드 로고 텍스트 영역입니다. */
.brand {
  display: inline-flex; /* 내부에 마크와 텍스트를 나란히 놓기 위해 플렉스박스로 설정합니다. */
  align-items: center; /* 세로 중앙 정렬을 맞춥니다. */
  gap: 8px; /* 마크와 텍스트 사이 여백을 8px로 설정합니다. */
  font-weight: 700; /* 굵게 표현하여 눈에 띄게 만듭니다. */
  font-size: 16px; /* 글꼴 크기를 16px로 지정합니다. */
  color: var(--slate-900); /* 짙은 검은색으로 강조합니다. */
}

/* 브랜드 앞단의 미니멀한 스태킹 형태의 마크입니다. */
.brand-mark {
  width: 32px; /* 가로 크기 32px로 지정하여 8의 배수 비율을 맞춥니다. */
  height: 32px; /* 세로 크기 32px로 지정하여 8의 배수 비율을 맞춥니다. */
  border-radius: 8px; /* 모서리를 8px 둥글게 만듭니다. */
  border: 1px solid var(--slate-200); /* 연한 경계 테두리를 줍니다. */
  background: #ffffff; /* 내부 배경을 흰색으로 지정합니다. */
  color: var(--accent-blue); /* 아이콘 색상을 포인트 블루로 지정합니다. */
  display: inline-grid; /* 내부 SVG 아이콘을 완벽하게 중앙에 두기 위해 그리드를 활성화합니다. */
  place-items: center; /* 가로/세로 정렬을 정중앙으로 일치시킵니다. */
  font-weight: 800; /* 텍스트 형식 마크일 때 굵게 표시합니다. */
}

/* 헤더 우측의 메뉴 링크 모음입니다. */
.nav-links {
  display: flex; /* 메뉴들을 가로로 나열합니다. */
  align-items: center; /* 세로축 가운데에 위치시킵니다. */
  gap: 24px; /* 각 링크 간의 간격을 24px로 유지합니다. */
  font-size: 14px; /* 메뉴 글씨 크기를 14px로 살짝 콤팩트하게 만듭니다. */
  font-weight: 600; /* 조금 굵은 서체를 적용해 인지하기 편하게 합니다. */
  color: var(--slate-600); /* 덜 강렬한 보조 텍스트 컬러를 기본값으로 지정합니다. */
}

/* 메뉴 링크에 마우스를 올렸을 때 나타나는 인터랙션입니다. */
.nav-links a:hover {
  color: var(--slate-900); /* 짙은 검은색으로 글씨 색을 전환해 활성화를 표시합니다. */
}


/* ==========================================================================
   Button Components (공통 버튼 컴포넌트)
   ========================================================================== */

/* 모든 버튼의 공통 속성 정의입니다. 터치 타깃 규격을 준수합니다. */
.btn {
  min-height: 48px; /* 터치 타깃을 위해 최소 48px의 세로 높이를 보장합니다. */
  padding: 0 24px; /* 좌우 여백을 24px로 조정하여 8의 배수 비율을 맞춥니다. */
  border-radius: 8px; /* 모서리를 8px 둥글게 처리합니다. */
  font-weight: 600; /* 서체를 단단하게 두껍게 설정합니다. */
  font-size: 14px; /* 글자 크기는 14px로 설정합니다. */
  cursor: pointer; /* 마우스 오버 시 손가락 아이콘으로 표시합니다. */
  display: inline-flex; /* 내부 아이콘과 글자를 가로로 나란히 맞춥니다. */
  align-items: center; /* 세로 중앙 정렬을 맞춥니다. */
  justify-content: center; /* 가로 중앙 정렬을 맞춥니다. */
  gap: 8px; /* 아이콘과 글자 사이 간격을 8px 띄웁니다. */
  transition: all 0.2s ease; /* 모든 스타일 전환(배경색 등)을 부드럽게 만듭니다. */
  border: 1px solid transparent; /* 테두리를 투명으로 기본 초기화합니다. */
}

/* 기본 강조 행동 유도 버튼(Primary) 스타일입니다. */
.btn-primary {
  background: var(--accent-blue); /* IT 블루를 배경색으로 채웁니다. */
  color: #ffffff; /* 텍스트는 밝고 명확한 흰색으로 지정합니다. */
}

/* 기본 강조 버튼의 마우스 호버 시 상태 변화입니다. */
.btn-primary:hover {
  background: var(--accent-blue-hover); /* 한 단계 깊은 블루 색상으로 자연스럽게 교체합니다. */
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 서브 액션 버튼(Secondary) 스타일입니다. */
.btn-secondary {
  background: #ffffff; /* 배경을 깨끗한 흰색으로 처리합니다. */
  color: var(--slate-800); /* 글씨는 일반 텍스트 색상인 Slate 800으로 설정합니다. */
  border-color: var(--slate-200); /* 연한 기본 테두리를 감쌉니다. */
}

/* 서브 액션 버튼의 마우스 호버 시 상태 변화입니다. */
.btn-secondary:hover {
  border-color: var(--slate-800); /* 테두리를 진한 색으로 강조하여 반응성을 보여줍니다. */
  background: var(--slate-50); /* 배경을 아주 옅은 회색으로 변경합니다. */
}


/* ==========================================================================
   Hero Section (메인 페이지 히어로 영역)
   ========================================================================== */

/* 히어로 섹션의 배경색을 정의하고 세련되게 구획을 경계 짓습니다. */
.hero {
  background: var(--slate-50); /* 매우 옅고 시원한 그레이 블루톤을 배경으로 깝니다. */
  border-bottom: 1px solid var(--slate-100); /* 밑면 경계선으로 구분합니다. */
}

/* 히어로 섹션 내부 정렬을 2열 그리드로 나눠 시각 균형을 잡습니다. */
.hero-inner {
  max-width: var(--max-width); /* 최대 너비 1200px 설정입니다. */
  margin: 0 auto; /* 화면 정중앙에 고정 배치합니다. */
  padding: 80px 24px 96px; /* 위아래로 넉넉히 80px, 96px 호흡을 확보합니다. */
  display: grid; /* 그리드 레이아웃을 활성화합니다. */
  grid-template-columns: 1.1fr 0.9fr; /* 좌측(설명) 열을 우측(도식) 열보다 미세하게 넓게 배치합니다. */
  gap: 64px; /* 열과 열 사이 여백을 64px로 넓게 주어 답답함을 완전히 없앱니다. */
  align-items: center; /* 세로 기준 정중앙 정렬을 일치시킵니다. */
}

/* 주제나 카테고리를 작고 고급스럽게 표기하는 눈썹 텍스트입니다. */
.eyebrow {
  margin: 0 0 12px; /* 하단 제목과의 사이 간격을 12px 벌립니다. */
  color: var(--accent-blue); /* 포인트 블루를 활용해 시선을 유도합니다. */
  font-size: 13px; /* 13px 크기로 콤팩트하게 표기합니다. */
  font-weight: 700; /* 눈에 띄게 두께감을 줍니다. */
  text-transform: uppercase; /* 영문일 때 모두 대문자로 노출시킵니다. */
  letter-spacing: 0.05em; /* 좁은 대문자 간의 숨통을 트기 위해 자간을 미세하게 늘립니다. */
}

/* 메인 대형 헤드라인 타이포그래피입니다. */
h1 {
  margin: 0; /* 기본 마진을 없애 스타일 정합성을 잡습니다. */
  font-size: clamp(32px, 4.5vw, 46px); /* 뷰포트 크기에 맞춰 32px에서 46px 사이로 유연하게 반응합니다. */
  font-weight: 700; /* 굵기는 과하지 않은 700(Bold)으로 정밀 제어합니다. */
  color: var(--slate-900); /* 가장 짙은 헤드라인 색상을 사용합니다. */
  line-height: 1.25; /* 본문보다 타이트한 줄간격으로 큰 텍스트의 흩어짐을 막습니다. */
  letter-spacing: -0.02em; /* 큰 텍스트 특성상 글자 간 여백을 미세하게 조여 견고한 인상을 만듭니다. */
  text-wrap: balance; /* 한글 제목이 한 단어만 외롭게 다음 줄로 떨어지지 않게 돕습니다. */
}

/* 히어로 설명 텍스트 영역입니다. */
.lead {
  margin-top: 24px; /* 제목과의 위 여백을 24px로 조정하여 8의 배수 비율을 맞춥니다. */
  color: var(--slate-600); /* 본문 보조 텍스트 회색을 활용해 대비를 한 단계 뺍니다. */
  font-size: 17px; /* 리드 설명문은 일반 글자보다 한 템포 큰 17px로 지정합니다. */
  line-height: 1.6; /* 쾌적하게 한 호흡으로 읽을 수 있는 줄높이입니다. */
}

/* 히어로 내부의 버튼 정렬 컨테이너입니다. */
.hero-actions {
  display: flex; /* 버튼을 가로로 정렬합니다. */
  flex-wrap: wrap; /* 모바일 등 좁은 화면에서 유연하게 행바꿈되도록 유도합니다. */
  gap: 16px; /* 버튼과 버튼의 간격을 16px로 조정하여 8의 배수 비율을 맞춥니다. */
  margin-top: 32px; /* 리드 글과의 위 간격을 32px 띄웁니다. */
}

/* 서비스의 주요 특장점 배지들을 모아놓는 행 영역입니다. */
.badge-row {
  display: flex; /* 배지들을 가로로 나열합니다. */
  flex-wrap: wrap; /* 배지가 넘칠 때 다음 행으로 유연하게 넘깁니다. */
  gap: 8px; /* 각 배지 간격을 8px로 조밀하게 정돈합니다. */
  margin-top: 48px; /* 버튼 라인과의 간격을 48px로 벌려 8의 배수 비율을 맞춥니다. */
}

/* 개별 미니멀 칩 스타일의 서비스 배지입니다. */
.badge {
  display: inline-flex; /* 내부 정렬을 위해 플렉스를 켭니다. */
  align-items: center; /* 가운데 맞춤 정렬입니다. */
  height: 32px; /* 높이를 32px로 조정하여 8의 배수 비율을 맞춥니다. */
  padding: 0 12px; /* 좌우 여백을 12px로 조정하여 8의 배수 비율을 맞춥니다. */
  border-radius: 8px; /* 둥글기는 8px로 조정하여 일관성을 높입니다. */
  font-size: 12px; /* 작은 12px 글씨입니다. */
  font-weight: 600; /* 살짝 볼드 서체로 단단하게 표현합니다. */
  background: #ffffff; /* 배지 배경을 흰색으로 깔끔하게 처리합니다. */
  border: 1px solid var(--slate-200); /* 얇고 연한 그레이 테두리를 줍니다. */
  color: var(--slate-600); /* 너무 강하게 튀지 않는 본문용 글씨색을 줍니다. */
}


/* ==========================================================================
   Workflow Panel (히어로 우측 & 자동화 흐름도 미니 데모 카드)
   ========================================================================== */

/* 문의 처리 실시간 자동화 흐름을 시뮬레이션 형태로 보여주는 카드입니다. */
.workflow-panel {
  background: #ffffff; /* 완벽한 순백색 배경을 씁니다. */
  border: 1px solid var(--slate-200); /* 얇은 테두리를 감싸 시각 구조를 차분히 고정합니다. */
  border-radius: var(--radius); /* 모서리는 공통 12px 라운딩입니다. */
  padding: 24px; /* 내부 패딩을 24px로 넉넉하게 감싸 답답함을 풉니다. */
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02); /* 극도로 미세하고 맑은 그림자만 얹습니다. */
}

/* 흐름도 패널 헤더 부분입니다. */
.panel-head {
  display: flex; /* 제목과 작동 신호 배지를 한 행의 양 끝에 배치합니다. */
  justify-content: space-between; /* 양 끝 정렬입니다. */
  align-items: center; /* 세로 중앙을 맞춥니다. */
  font-size: 13px; /* 글씨를 13px로 콤팩트하게 맞춥니다. */
  font-weight: 700; /* 단단하게 두께감을 줍니다. */
  color: var(--slate-900); /* 짙은 색으로 표기합니다. */
  border-bottom: 1px solid var(--slate-100); /* 구분선을 얇게 줍니다. */
  padding-bottom: 16px; /* 구분선과의 여백을 16px 띄웁니다. */
}

/* 운영 가능함을 뜻하는 미니 그린 필(Pill) 배지입니다. */
.status-pill {
  font-size: 11px; /* 11px로 아주 작고 정교한 텍스트입니다. */
  font-weight: 600; /* 선명히 굵게 표기합니다. */
  color: #059669; /* 신뢰감을 주는 편안한 그린 컬러 텍스트입니다. */
  background: #ecfdf5; /* 옅은 민트/그린 계열의 소프트 배경입니다. */
  padding: 4px 8px; /* 4px 8px 패딩으로 타원형을 완성합니다. */
  border-radius: 9999px; /* 완전한 타원을 형성하기 위해 넓은 값을 줍니다. */
}

/* 단계별 자동화 처리 목록 리스트입니다. */
.flow-list {
  margin: 24px 0 0; /* 위 헤더와의 상단 여백을 24px로 조정하여 8의 배수 비율을 맞춥니다. */
  padding: 0; /* 기본 리스트 들여쓰기를 제거합니다. */
  display: flex; /* 플렉스박스를 켭니다. */
  flex-direction: column; /* 위에서 아래로 단계를 묶습니다. */
  gap: 16px; /* 단계와 단계 사이 간격을 16px 띄웁니다. */
  list-style: none; /* 동그라미 불릿 기호를 비활성화합니다. */
}

/* 각 단계별 카드 형태의 리스트 아이템입니다. */
.flow-list li {
  display: flex; /* 숫자 박스와 글 정보를 가로로 정렬합니다. */
  gap: 16px; /* 둘 사이 간격을 16px로 지정합니다. */
  align-items: flex-start; /* 글씨가 여러 줄일 때 상단 라인에 정렬을 맞춥니다. */
  padding: 16px; /* 내부 공간을 16px로 확보합니다. */
  border-radius: 8px; /* 내측 둥글기를 8px로 설정합니다. */
  border: 1px solid var(--slate-100); /* 아주 연한 내부 테두리를 부여합니다. */
  background: var(--slate-50); /* 배경을 옅은 회색으로 깝니다. */
  position: relative; /* 단계 연결선을 absolute로 꽂기 위해 relative 기준을 잡습니다. */
}

/* 마지막 단계를 제외하고 각 단계 사이에 세로 연결 라인을 가상 요소로 구현합니다. */
.flow-list li:not(:last-child)::after {
  content: ""; /* 가상 요소를 띄우기 위한 필수 프로퍼티입니다. */
  position: absolute; /* 절대 좌표로 라인을 고정합니다. */
  left: 32px; /* 숫자 박스 중앙 정렬 축(16px 패딩 + 16px 박스 절반)에 정확히 대칭시킵니다. */
  bottom: -16px; /* 현재 카드 밑으로 라인을 16px 내립니다. */
  width: 2px; /* 선 굵기 2px입니다. */
  height: 16px; /* 선 높이 16px로 딱 사이 간격을 채웁니다. */
  background: var(--slate-200); /* 연결선 색을 기본 경계선 색으로 지정합니다. */
}

/* 단계 번호가 표기되는 미니 스퀘어 박스입니다. */
.step-num {
  width: 32px; /* 가로 32px 고정입니다. */
  height: 32px; /* 세로 32px 고정입니다. */
  border-radius: 8px; /* 8px의 둥글기로 모서리 비율을 맞춥니다. */
  background: var(--accent-blue-soft); /* 연한 블루톤의 부드러운 배경을 선언합니다. */
  color: var(--accent-blue); /* 글씨는 선명한 블루로 매칭합니다. */
  display: grid; /* 글씨 정중앙 배치를 위해 그리드로 설정합니다. */
  place-items: center; /* 가로세로 중앙 정렬입니다. */
  font-weight: 700; /* 두껍게 표현하여 숫자의 가독성을 챙킵니다. */
  font-size: 13px; /* 글씨 크기는 13px입니다. */
  flex-shrink: 0; /* 레이아웃이 찌그러질 때 숫자 박스 가로 너비가 좁아지지 않게 보호합니다. */
}

/* 단계의 굵은 메인 텍스트 명칭입니다. */
.flow-list strong {
  display: block; /* 줄바꿈 형태로 만들어 설명과 행을 분리합니다. */
  font-size: 14px; /* 글자 크기는 14px입니다. */
  color: var(--slate-800); /* 진한 텍스트 컬러입니다. */
  margin-bottom: 2px; /* 보조 설명과의 미세 간격을 2px 벌립니다. */
}

/* 단계별 연동 도구나 결과 안내 보조 텍스트입니다. */
.flow-list span {
  font-size: 13px; /* 조금 작고 차분한 13px 서체입니다. */
  color: var(--slate-500); /* 한 단계 밝은 회색으로 계층을 나눕니다. */
}


/* ==========================================================================
   Sections & Layout Components (기본 섹션 및 구획 디자인)
   ========================================================================== */

/* 본문 영역을 구분하는 표준 공통 섹션 스타일입니다. */
.section {
  padding: 96px 24px; /* 위아래로 96px의 넓은 여백을 주어 고급스러운 호흡을 줍니다. */
  border-bottom: 1px solid var(--slate-100); /* 섹션 간 얇은 아래 경계선을 둡니다. */
}

/* 번갈아 나타나는 배경 대비용 얼터너티브(Alternative) 섹션 스타일입니다. */
.section.alt {
  background: var(--slate-50); /* 옅은 그레이 배경으로 구획을 자연스럽게 구분 짓습니다. */
}

/* 각 섹션 내부 콘텐츠의 중앙 정렬 컨테이너입니다. */
.section-inner {
  max-width: var(--max-width); /* 최대 1200px 폭으로 제한합니다. */
  margin: 0 auto; /* 중앙 배치합니다. */
}

/* 섹션 하단 또는 히어로 하단에 배치되는 행동 유도 버튼 컨테이너입니다. */
.section-actions {
  margin-top: 48px; /* 본문 영역과의 간격을 48px로 넓혀 8의 배수 비율을 맞춥니다. */
  display: flex; /* 내부 버튼 배치를 위해 플렉스를 켭니다. */
  gap: 16px; /* 버튼이 여러 개일 경우 간격을 16px로 끕니다. */
  flex-wrap: wrap; /* 모바일 대응 행바꿈입니다. */
}

/* 일반적인 섹션 콘텐츠 하단의 CTA 버튼은 중앙 정렬하여 시각적 완성도를 높입니다. */
.section .section-actions {
  justify-content: center; /* 가로축 정가운데 배치합니다. */
}

/* 히어로 구획 내의 버튼 그룹은 왼쪽 정렬을 기본으로 삼습니다. */
.cluster-hero .section-actions {
  justify-content: flex-start; /* 가로축 왼쪽 배치합니다. */
}

/* 각 구획 최상단에서 타이틀과 소개글을 나타내는 헤더 영역입니다. */
.section-header {
  margin-bottom: 64px; /* 아래 실제 리스트나 그리드와의 수직 간격을 64px로 조정하여 8의 배수 비율을 맞춥니다. */
  max-width: 800px; /* 너비를 800px로 조여 한눈에 읽히게 합니다. */
}

/* 섹션 대형 제목 타이틀입니다. */
.section-header h2 {
  font-size: clamp(26px, 3.5vw, 32px); /* 뷰포트에 맞게 26px에서 32px까지 유연하게 대응합니다. */
  font-weight: 700; /* 볼드 서체로 강력한 가시성을 줍니다. */
  color: var(--slate-900); /* 짙은 타이틀 컬러를 씁니다. */
  letter-spacing: -0.01em; /* 자간을 조여 헤드라인 인상을 다듬습니다. */
  margin: 0; /* 마진 제로 초기화입니다. */
}

/* 섹션 제목 하단의 메인 요약 보조 단락입니다. */
.section-header p {
  font-size: 16px; /* 16px로 쾌적한 폰트 크기입니다. */
  color: var(--slate-600); /* 눈이 편안한 슬레이트 보조색을 줍니다. */
  margin-top: 16px; /* 타이틀과의 상단 간격을 16px 띄웁니다. */
  line-height: 1.6; /* 글줄 사이 여유를 줍니다. */
}

/* 중요 성과나 핵심 내용을 조명하는 좌측 보더 포인트 박스입니다. */
.summary-box {
  border-left: 3px solid var(--accent-blue); /* 왼쪽에 포인트 블루 세로 라인을 긋습니다. */
  background: var(--slate-50); /* 한 템포 밝은 회색 박스로 만듭니다. */
  padding: 24px; /* 내부에 24px의 일정한 패딩을 줍니다. */
  border-radius: 0 8px 8px 0; /* 오른쪽 모서리만 8px 둥글게 깎아 안정감을 줍니다. */
  font-size: 14px; /* 글꼴 크기를 14px로 정의합니다. */
  color: var(--slate-600); /* 차분한 글씨색입니다. */
}

/* 요약 박스 내부의 굵은 핵심 표제입니다. */
.summary-box strong {
  display: block; /* 별도 행으로 줄 바꿈합니다. */
  color: var(--slate-900); /* 강조되는 검은색 텍스트입니다. */
  margin-bottom: 6px; /* 본문 문장과의 간격을 6px 벌립니다. */
}


/* ==========================================================================
   Responsive Grid System (반응형 다열 그리드 레이아웃)
   ========================================================================== */

/* 기본 그리드 선언부입니다. 기본 갭을 정의합니다. */
.grid {
  display: grid; /* 그리드 배치 엔진을 활성화합니다. */
  gap: 24px; /* 카드 사이 간격을 상하좌우 24px로 시원하게 배치합니다. */
}

/* 2열 레이아웃 그리드입니다. */
.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 등분 분할 2열 구조입니다. */
}

/* 3열 레이아웃 그리드입니다. */
.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 등분 분할 3열 구조입니다. */
}

/* 4열 레이아웃 그리드입니다. */
.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 등분 분할 4열 구조입니다. */
}


/* ==========================================================================
   Card Components (공통 카드 UI 디자인)
   ========================================================================== */

/* 정보 제공 카드의 기본형 스타일입니다. 마이크로 인터랙션을 장착합니다. */
.card {
  background: #ffffff; /* 순백색 카드판을 형성합니다. */
  border: 1px solid var(--slate-200); /* 얇고 심플한 테두리선입니다. */
  border-radius: var(--radius); /* 모서리는 공통 변수인 12px 둥글기입니다. */
  padding: 32px; /* 카드 안쪽으로 32px의 풍성한 공간을 제공합니다. */
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); /* 호버 액션을 부드럽게 전개하는 트랜지션입니다. */
}

/* 카드 위에 마우스를 얹었을 때(hover)의 스타일 변화입니다. */
.card:hover {
  border-color: var(--slate-300); /* 테두리를 조금 더 선명한 그레이로 변형합니다. */
  transform: translateY(-2px); /* 위로 2px 미세하게 띄워 올리는 입체 인터랙션입니다. */
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.02); /* 아주 가볍고 투명한 그림자를 살짝 덧씌웁니다. */
}

/* 카드 내부의 중간 제목 텍스트입니다. */
.card h3 {
  font-size: 18px; /* 18px 폰트 크기입니다. */
  font-weight: 600; /* 미디엄 볼드 600 굵기입니다. */
  color: var(--slate-900); /* 헤드라인 글씨색입니다. */
  margin: 0 0 16px; /* 하단 설명 글과의 수직 간격을 16px 벌립니다. */
}

/* 카드 내부의 상세 본문 단락입니다. */
.card p {
  margin: 0; /* 여백 초기화입니다. */
  font-size: 14px; /* 14px 크기로 조밀하고 정교하게 표현합니다. */
  color: var(--slate-600); /* 가독성이 좋은 서브 컬러입니다. */
  line-height: 1.6; /* 편안한 줄높이입니다. */
}

/* 카드 내부에 목록형 정보가 들어올 때의 여백 및 세부 설계입니다. */
.card ul {
  margin: 16px 0 0; /* 위 설명 단락과의 여백을 16px 벌립니다. */
  padding-left: 20px; /* 리스트 들여쓰기 20px를 확보합니다. */
  color: var(--slate-600); /* 보조 텍스트 컬러입니다. */
  font-size: 14px; /* 본문 14px입니다. */
  display: grid; /* 리스트 아이템 사이 여백을 위해 그리드를 씁니다. */
  gap: 8px; /* 리스트 요소 간 여백을 8px로 설정합니다. */
}


/* ==========================================================================
   Checklist System (정교한 체크리스트)
   ========================================================================== */

/* 리스트형 특장점 나열에 사용하는 깔끔한 체크리스트입니다. */
.check-list {
  list-style: none; /* 리스트 원형 불릿을 삭제합니다. */
  padding: 0; /* 여백을 제로화합니다. */
  display: grid; /* 간격을 정교히 제어하기 위해 그리드로 설정합니다. */
  gap: 12px; /* 행 간격을 12px 띄웁니다. */
}

/* 체크리스트의 각 항목 요소입니다. */
.check-list li {
  position: relative; /* 앞에 체크 표시 아이콘을 고정하기 위해 absolute 기준점으로 만듭니다. */
  padding-left: 24px; /* 앞 기호 공간으로 24px의 여백 패딩을 만듭니다. */
  font-size: 14px; /* 14px 글 크기입니다. */
  color: var(--slate-600); /* 부드러운 설명 글씨색입니다. */
}

/* 가상 요소 ::before를 통해 이모지 기호 대신 표준형 체크 마크를 정교하게 꽂아 넣습니다. */
.check-list li::before {
  content: "✓"; /* 순수 기호 체크 마크를 씁니다. */
  position: absolute; /* 절대 좌표로 위치시킵니다. */
  left: 0; /* 가장 우측 경계선에 정렬을 맞춥니다. */
  top: 0; /* 세로 시작점에 맞춥니다. */
  color: var(--accent-blue); /* 포인트 테크 블루 컬러를 입혀 가독성과 흥미를 높입니다. */
  font-weight: 700; /* 볼드하게 처리합니다. */
}


/* ==========================================================================
   Table & Responsive Layout (테이블 및 견적표 컴포넌트)
   ========================================================================== */

/* 모바일 좁은 화면에서 가로 스크롤이 자연스레 생기도록 하는 반응형 테이블 랩퍼입니다. */
.responsive-table {
  overflow-x: auto; /* 화면 폭보다 테이블이 크면 가로 스크롤을 활성화합니다. */
  border: 1px solid var(--slate-200); /* 얇고 단순한 테두리로 감쌉니다. */
  border-radius: var(--radius); /* 공통 모서리 라운딩인 12px를 줍니다. */
  background: #ffffff; /* 흰 배경입니다. */
}

/* 실제 테이블 요소 스타일 정의입니다. */
table {
  width: 100%; /* 너비를 꽉 채우도록 설정합니다. */
  border-collapse: collapse; /* 테이블 셀 사이 이중 경계선을 합칩니다. */
  text-align: left; /* 기본 글자 정렬을 왼쪽 맞춤으로 설정합니다. */
  font-size: 14px; /* 표준 정보 테이블 크기인 14px입니다. */
}

/* 테이블의 헤더 셀 및 본문 셀 스타일입니다. */
th, td {
  padding: 16px 24px; /* 좌우 패딩을 24px로 조정하여 8의 배수 비율을 맞춥니다. */
  border-bottom: 1px solid var(--slate-100); /* 얇은 연한 선으로 행을 나눕니다. */
}

/* 테이블 제목 행(헤더) 정의입니다. */
th {
  background: var(--slate-50); /* 머리행 영역에 슬레이트 50 연회색을 채워 배경을 구분합니다. */
  font-weight: 600; /* 볼드체보다 가벼운 600 두께 서체를 활용합니다. */
  color: var(--slate-800); /* 본문 강조 텍스트 컬러입니다. */
}

/* 테이블 데이터 셀 정의입니다. */
td {
  color: var(--slate-600); /* 보조 텍스트 컬러입니다. */
}

/* 테이블의 마지막 행 셀은 밑줄을 없애서 둥근 모서리 내부에서 잘려 보이지 않게 처리합니다. */
tr:last-child td {
  border-bottom: none; /* 밑 경계선을 제거합니다. */
}


/* ==========================================================================
   Flow Diagram (수평/수직 프로세스 단선 흐름도)
   ========================================================================== */

/* 프로세스의 흐름을 보여주는 연속형 다이어그램 영역입니다. */
.flow-diagram {
  display: grid; /* 그리드 배치를 활성화합니다. */
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* 등분 분할 6단계 1열 배열입니다. */
  gap: 24px; /* 노드와 노드 사이 여백을 24px로 설정합니다. */
}

/* 다이어그램 내부 개별 단계 노드입니다. */
.flow-node {
  background: #ffffff; /* 순백색으로 채웁니다. */
  border: 1px solid var(--slate-200); /* 기본 연한 테두리선입니다. */
  border-radius: 8px; /* 모서리를 8px 둥글게 만들어 비율을 맞춥니다. */
  padding: 24px; /* 패딩 24px로 일정한 비율을 확보합니다. */
  position: relative; /* 단계 화살표를 배치하기 위해 absolute 부모 기점으로 선언합니다. */
  display: flex; /* 내부 제목과 설명을 유연하게 배치하기 위해 플렉스를 켭니다. */
  flex-direction: column; /* 세로축 정렬입니다. */
  justify-content: space-between; /* 제목은 위, 꼬리말 정보는 아래에 배치해 높이 대칭을 맞춥니다. */
  min-height: 128px; /* 최소 높이를 128px로 지정하여 8의 배수 비율을 맞춥니다. */
  transition: border-color 0.2s ease; /* 호버 상태 테두리 변형을 부드럽게 렌더링합니다. */
}

/* 노드 마우스 오버 시 스타일 변화입니다. */
.flow-node:hover {
  border-color: var(--accent-blue); /* 포인트 블루색으로 변경하여 활성 상태를 알립니다. */
}

/* 마지막 단계를 제외하고 노드 오른쪽에 흐름 지시 화살표를 얹습니다. */
.flow-node:not(:last-child)::after {
  content: "→"; /* 오른쪽 화살표 캐릭터 기호를 씁니다. */
  position: absolute; /* 절대 좌표로 노드 우측 외곽에 고정합니다. */
  right: -16px; /* 노드 우측 경계선 밖 16px 자리에 화살표를 띄웁니다. */
  top: 50%; /* 수직 정중앙 50% 높이에 화살표를 위치시킵니다. */
  transform: translateY(-50%); /* 정확히 세로 중심선에 일치시키는 보정입니다. */
  color: var(--slate-300); /* 튀지 않게 연한 회색 화살표 색상을 입힙니다. */
  font-size: 16px; /* 크기는 16px입니다. */
  z-index: 10; /* 앞으로 가져옵니다. */
}

/* 노드 내부 굵은 표제 명칭입니다. */
.flow-node b {
  display: block; /* 블록 형식으로 처리합니다. */
  font-size: 14px; /* 14px 글 크기입니다. */
  color: var(--slate-800); /* 진한 텍스트색입니다. */
  margin-bottom: 8px; /* 설명과의 아래 간격을 8px로 지정해 비율을 맞춥니다. */
}

/* 노드 하단의 세부 동작 안내 텍스트입니다. */
.flow-node span {
  font-size: 12px; /* 12px 콤팩트 크기입니다. */
  color: var(--slate-500); /* 계층을 뺀 회색을 입힙니다. */
  line-height: 1.45; /* 살짝 좁은 줄간으로 설명의 밀도를 제어합니다. */
}


/* ==========================================================================
   Tool Grid (연동 가능 도구 리스트 영역)
   ========================================================================== */

/* 연동 도구 카테고리 4열 그리드 배치 영역입니다. */
.tool-grid {
  display: grid; /* 그리드 배치를 활성화합니다. */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 등분 분할 4열 레이아웃입니다. */
  gap: 24px; /* 각 도구 그룹 간격을 24px로 조정하여 8의 배수 비율을 맞춥니다. */
}

/* 도구 분류용 미니 카드 박스 스타일입니다. */
.tool-group {
  background: #ffffff; /* 흰색 배경 카드입니다. */
  border: 1px solid var(--slate-200); /* 연한 테두리선입니다. */
  border-radius: var(--radius); /* 공통 12px 모서리 둥글기입니다. */
  padding: 24px; /* 내부 공간 24px입니다. */
  transition: border-color 0.2s ease; /* 호버 변환 시 자연스러운 전환 효과를 줍니다. */
}

/* 도구 분류 마우스 오버 상태 변화입니다. */
.tool-group:hover {
  border-color: var(--slate-300); /* 테두리를 조금 더 짙게 처리합니다. */
}

/* 도구 분류 그룹 제목입니다. */
.tool-group h3 {
  font-size: 15px; /* 15px 폰트 크기입니다. */
  font-weight: 600; /* 세미 볼드 두께로 눈에 띄게 감쌉니다. */
  color: var(--slate-900); /* 진한 헤드라인 블랙색입니다. */
  margin: 0 0 16px; /* 하단 칩 목록과의 간격을 16px 띄웁니다. */
}

/* 도구 칩 배지들을 모아 가로 정렬시키는 랩퍼 영역입니다. */
.chip-wrap {
  display: flex; /* 칩들을 가로로 나란히 둡니다. */
  flex-wrap: wrap; /* 박스 공간 넘치면 자연스레 행을 바꿉니다. */
  gap: 8px; /* 칩 사이 간격을 상하좌우 8px로 조밀하게 정돈합니다. */
}

/* 각각의 도구 명이 명시되는 조밀한 칩 배지 스타일입니다. */
.tool-chip {
  font-size: 12px; /* 12px 크기로 아주 조밀하고 눈에 띄지 않게 처리합니다. */
  font-weight: 600; /* 단단하게 표시합니다. */
  background: var(--slate-50); /* 옅은 그레이 배경입니다. */
  border: 1px solid var(--slate-100); /* 테두리 경계는 아주 연하게 둡니다. */
  color: var(--slate-600); /* 설명 컬러를 입힙니다. */
  padding: 4px 10px; /* 위아래 4px, 좌우 10px 여백으로 칩 비율을 잡습니다. */
  border-radius: 6px; /* 모서리는 6px 둥글게 다듬습니다. */
}


/* ==========================================================================
   Timeline System (프로세스 진행 타임라인 단계)
   ========================================================================== */

/* 단계별 추진 프로세스를 한눈에 보여주는 타임라인 영역입니다. */
.timeline {
  display: flex; /* 플렉스박스로 요소를 정돈합니다. */
  flex-direction: column; /* 위에서 아래로 세로 한 줄 배치합니다. */
  gap: 24px; /* 단계 카드들 사이 세로 간격을 24px로 조정하여 8의 배수 비율을 맞춥니다. */
  counter-reset: process; /* CSS 카운터를 활성화하여 HTML 수정 없이 번호를 매길 준비를 합니다. */
}

/* 타임라인 진행 개별 단계 아이템 카드입니다. */
.timeline-item {
  display: grid; /* 그리드 배치를 적용합니다. */
  grid-template-columns: 48px 1fr; /* 좌측 번호 영역과 우측 상세 정보를 나눕니다. */
  gap: 24px; /* 번호와 세부사항 사이 간격을 24px로 조정하여 8의 배수 비율을 맞춥니다. */
  background: #ffffff; /* 순백색 카드 배경입니다. */
  border: 1px solid var(--slate-200); /* 테두리선입니다. */
  border-radius: var(--radius); /* 모서리는 공통 변수인 12px 둥글기입니다. */
  padding: 24px; /* 패딩을 24px로 조정하여 일정한 비율을 맞춥니다. */
  align-items: center; /* 세로 정렬을 중앙으로 일치시켜 숫자 구체와 우측 글 묶음의 수직 균형을 맞춥니다. */
}

/* 가상 요소 ::before로 타임라인 단계 숫자를 CSS 상에서 자동 생성해 꽂아 넣습니다. */
.timeline-item::before {
  content: counter(process); /* counter-reset에서 선언된 카운터 값을 받아 숫자로 출력합니다. */
  counter-increment: process; /* 매번 요소를 만날 때마다 카운터 값을 1씩 자동 증가시킵니다. */
  width: 48px; /* 가로 48px 구체로 조정하여 8의 배수 비율을 맞춥니다. */
  height: 48px; /* 세로 48px 구체로 조정하여 8의 배수 비율을 맞춥니다. */
  border-radius: 8px; /* 모서리 8px 둥글게 깎아 입체 다이얼을 형성합니다. */
  background: var(--accent-blue-soft); /* 연한 블루톤 소프트 배경입니다. */
  color: var(--accent-blue); /* 메인 포인트 블루 컬러 숫자를 입힙니다. */
  display: grid; /* 숫자 텍스트를 중앙에 정렬하기 위해 그리드로 설정합니다. */
  place-items: center; /* 가로세로 중앙 정렬입니다. */
  font-weight: 700; /* 숫자를 굵고 선명하게 보정합니다. */
  font-size: 15px; /* 글자 크기는 15px입니다. */
}


/* ==========================================================================
   Pricing Custom Style (견적 패키지 카드 스타일)
   ========================================================================== */

/* 견적서 카드 세부 정렬 설정입니다. */
.price-card {
  display: flex; /* 카드 내부 구성을 플렉스박스로 활성화합니다. */
  flex-direction: column; /* 위에서 아래로 가지런히 정렬합니다. */
  min-height: 100%; /* 그리드 내부에서 다른 카드들과 높이를 동일하게 일치시킵니다. */
}

/* 견적서 카드 속 패키지 라벨 배지 정의입니다. */
.price-card .badge {
  align-self: flex-start; /* 카드 왼쪽 벽에 딱 붙도록 정렬을 유지합니다. */
  margin-bottom: 16px; /* 가격 텍스트와의 아래 간격을 16px 확보합니다. */
}

.price-line {
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
  margin: 4px 0 12px !important;
}

.section-note {
  margin: 24px 0 0;
  color: var(--slate-500);
  font-size: 14px;
  line-height: 1.7;
}

/* 견적서 카드 내 포함 혜택 리스트입니다. */
.price-card ul {
  margin: 24px 0 0; /* 위 가격 단락과 24px 상단 여백을 확보하여 8의 배수를 맞춥니다. */
  padding-left: 24px; /* 리스트 들여쓰기 24px를 적용하여 8의 배수를 맞춥니다. */
  display: grid; /* 혜택 라인 간 여백을 제어합니다. */
  gap: 8px; /* 혜택 리스트 간격을 8px로 조정하여 8의 배수 비율을 맞춥니다. */
}


/* ==========================================================================
   FAQ Accordion Style (아코디언 형태의 FAQ 컴포넌트)
   ========================================================================== */

/* FAQ 질문 리스트를 담아놓는 컨테이너 그리드입니다. */
.faq-list {
  display: grid; /* 그리드 레이아웃입니다. */
  gap: 24px; /* 아코디언 카드 사이 간격을 24px로 조정하여 8의 배수 비율을 맞춥니다. */
}

/* HTML5 표준 details 아코디언 요소입니다. */
details {
  border: 1px solid var(--slate-200); /* 얇고 심플한 테두리선입니다. */
  border-radius: 8px; /* 모서리는 8px 둥글게 깎아 마감합니다. */
  background: #ffffff; /* 순백색 배경을 채웁니다. */
  transition: border-color 0.2s ease; /* 펼쳐지거나 호버 시 테두리 색상 자연스레 전환합니다. */
}

/* 아코디언이 클릭되어 활성화(open)된 상태의 테두리 변경 스타일입니다. */
details[open] {
  border-color: var(--slate-300); /* 한 단계 어두운 그레이색으로 명시성을 줍니다. */
}

/* 아코디언의 접힌 헤더 부분을 누르는 버튼 영역(summary) 스타일 정의입니다. */
summary {
  padding: 20px 24px; /* 사방 패딩으로 터치 영역을 쾌적하게 틉니다. */
  font-weight: 600; /* 글꼴 두께를 600(SemiBold)으로 단단하게 지정합니다. */
  color: var(--slate-900); /* 진한 헤드라인 블랙색입니다. */
  cursor: pointer; /* 마우스 오버 시 손가락 클릭 포인터로 바꿉니다. */
  display: flex; /* 질문 문장과 우측 플러스(+) 부호를 양 끝 정렬합니다. */
  justify-content: space-between; /* 양 끝 정렬 설정입니다. */
  align-items: center; /* 세로 중앙을 맞춥니다. */
  list-style: none; /* 브라우저 기본의 삼각형 불릿 화살표를 제거합니다. */
  font-size: 15px; /* 글씨 크기는 15px입니다. */
}

/* 사파리 브라우저에서 생기는 기본 삼각형 마커 아이콘을 추가로 제거해 일관성을 높입니다. */
summary::-webkit-details-marker {
  display: none; /* 사파리 마커 아이콘을 안 보이게 숨깁니다. */
}

/* 아코디언 오른편에 배치되는 플러스(+) 상태 지시 캐릭터 기호입니다. */
summary::after {
  content: "+"; /* 텍스트로 플러스 캐릭터를 지정합니다. */
  color: var(--slate-500); /* 옅은 그레이로 처리합니다. */
  font-size: 20px; /* 기호 크기 20px입니다. */
  font-weight: 400; /* 얇은 두께선 기호로 정밀하게 렌더링합니다. */
  transition: transform 0.2s ease; /* 회전 등 마이크로 애니메이션용 트랜지션입니다. */
}

/* 아코디언이 펼쳐졌을(open) 때 상태 기호를 마이너스(−)로 변경하고 미세 액션을 부여합니다. */
details[open] summary::after {
  content: "−"; /* 마이너스 문자를 씁니다. */
  transform: rotate(180deg); /* 180도 회전시켜 세밀한 시각 변화를 완성합니다. */
}

/* 아코디언 열림과 동시에 노출되는 하단의 실질적 상세 FAQ 답변 단락입니다. */
details p {
  padding: 0 24px 24px; /* 하단 패딩을 24px로 조정하여 8의 배수 비율을 맞춥니다. */
  color: var(--slate-600); /* 설명 보조용 텍스트 색을 입힙니다. */
  font-size: 14px; /* 본문 14px 크기입니다. */
  margin: 0; /* 단락 마진을 0으로 깝니다. */
  line-height: 1.6; /* 편안한 가독성을 제공합니다. */
}


/* ==========================================================================
   Diagnosis Form (업무 자동화 무료 자가 진단 문의 폼 영역)
   ========================================================================== */

/* 진단 폼의 최외각 컨테이너 디자인 사양서입니다. */
.diagnosis-form {
  background: #ffffff; /* 흰 바탕입니다. */
  border: 1px solid var(--slate-200); /* 얇고 깨끗한 그레이 테두리입니다. */
  border-radius: var(--radius); /* 모서리 12px 둥글기입니다. */
  padding: 48px; /* 내부를 48px로 조정하여 8의 배수 비율을 맞춥니다. */
  max-width: 800px; /* 폼이 좌우로 과도하게 넓어지지 않게 800px로 조여 줍니다. */
  margin: 0 auto; /* 좌우 마진을 오토로 주어 화면 가로축 정중앙에 배치합니다. */
  box-shadow: 0 4px 30px rgba(15, 23, 42, 0.01); /* 아주 가볍고 투명한 미세 그림자를 입힙니다. */
}

.diagnosis-form.contact-style {
  max-width: 720px;
  padding: 40px;
}

.contact-form-stack {
  display: grid;
  gap: 24px;
}

.contact-form-stack .field.full {
  grid-column: 1;
}

.diagnosis-form.contact-style .btn-primary {
  width: 100%;
  margin-top: 16px;
}

/* 입력 필드 배치를 조율하는 그리드 형태 컨테이너입니다. */
.form-grid {
  display: grid; /* 그리드 시스템 가동입니다. */
  grid-template-columns: 1fr 1fr; /* 입력 필드 기본 구성을 2열 좌우 배치로 나눕니다. */
  gap: 24px; /* 필드 간격 여백을 24px 띄워 줍니다. */
}

/* 각 입력 요소와 이름 라벨을 묶어두는 열 컨테이너입니다. */
.field {
  display: flex; /* 플렉스로 묶습니다. */
  flex-direction: column; /* 세로축 정렬로 라벨 아래 입력창이 오도록 배치합니다. */
  gap: 8px; /* 라벨과 입력 필드 틈새 간격을 8px 벌립니다. */
}

/* 설명이나 체크박스처럼 가로 전체 2열 공간을 가득 차지해야 하는 필드 설정입니다. */
.field.full {
  grid-column: span 2; /* 그리드의 2개 열 공간을 가득 늘려 점유하게 만듭니다. */
}

/* 폼 항목 상단의 텍스트 라벨입니다. */
.label, label {
  font-size: 13.5px; /* 눈에 알맞은 13.5px 폰트 크기입니다. */
  font-weight: 600; /* 단단하게 읽히도록 두껍게 만듭니다. */
  color: var(--slate-800); /* 진한 차콜 텍스트입니다. */
}

/* 실질적인 사용자 정보 입력 칸(input, select, textarea) 스타일 정의입니다. */
input, select, textarea {
  min-height: 48px; /* 터치 규격과 시각 안정감을 위해 높이를 48px로 설정합니다. */
  border: 1px solid var(--slate-200); /* 기본 연그레이 테두리선을 입힙니다. */
  border-radius: 8px; /* 둥글기는 8px로 설정합니다. */
  padding: 0 16px; /* 좌우 16px의 패딩을 주어 입력 시 글자가 가장자리에 딱 붙지 않게 정돈합니다. */
  font-size: 14px; /* 입력 글꼴 크기 14px입니다. */
  color: var(--slate-800); /* 짙은 차콜 입력글입니다. */
  background: #ffffff; /* 배경은 흰색입니다. */
  transition: all 0.2s ease; /* 포커스 시 스타일 변화를 부드럽게 연출합니다. */
  -webkit-appearance: none; /* 브라우저 자체 양식 커스텀 스타일을 날립니다. */
  -moz-appearance: none;
  appearance: none;
}

/* 여러 줄 장문 입력을 위한 텍스트 에어리어 스타일 보정입니다. */
textarea {
  padding: 16px; /* 사방 16px의 균일한 패딩을 줍니다. */
  min-height: 120px; /* 기본 높이를 120px로 확장합니다. */
  resize: vertical; /* 사용자가 수직 높이 방향으로만 수동 조절이 가능하게 고정합니다. */
}

/* 입력 필드 포커스(선택) 시 나타나는 입체 아웃라인 강조입니다. */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-blue); /* 포인트 블루색으로 테두리를 칠합니다. */
  outline: none; /* 크롬 등 브라우저 자체 기본 파란 테두리를 숨깁니다. */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); /* 옅고 고급스럽게 퍼지는 블루 글로우를 테두리에 덧씌웁니다. */
}

/* 다중 선택지 체크박스들을 모아놓는 그리드 랩퍼입니다. */
.choice-grid {
  display: grid; /* 그리드 배치를 활성화합니다. */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 등분 분할 3열 가로 배열 구조입니다. */
  gap: 16px; /* 항목 간격을 16px로 조정하여 8의 배수 비율을 맞춥니다. */
}

/* 각 개별 선택지의 카드/칩 형태 랩퍼 요소입니다. */
.choice {
  border: 1px solid var(--slate-200); /* 기본 연한 테두리선입니다. */
  border-radius: 8px; /* 8px 둥글기 모서리입니다. */
  padding: 12px 16px; /* 좌우 패딩을 16px로 조정하여 8의 배수 비율을 맞춥니다. */
  display: flex; /* 체크박스와 글자를 가로로 나열합니다. */
  align-items: center; /* 세로 중앙 정렬을 일치시킵니다. */
  gap: 8px; /* 체크박스와 라벨 글자 사이 틈새를 8px로 조정하여 비율을 맞춥니다. */
  cursor: pointer; /* 손가락 마우스 오버 포인터를 적용합니다. */
  font-size: 13.5px; /* 글꼴 크기 13.5px입니다. */
  color: var(--slate-600); /* 연한 설명 글씨색입니다. */
  background: #ffffff; /* 기본 흰색 배경입니다. */
  transition: all 0.2s ease; /* 호버 상태 변형 트랜지션입니다. */
}

/* 선택지 칩에 마우스를 오버했을 때의 가시성 강화 피드백입니다. */
.choice:hover {
  border-color: var(--slate-300); /* 테두리를 살짝 선명하게 강조합니다. */
  background: var(--slate-50); /* 배경을 아주 옅은 회색으로 물들여 호버를 알립니다. */
}

/* 칩 내부 실제 체크박스 요소의 크기 및 동작 속성 보정입니다. */
.choice input[type="checkbox"] {
  width: 18px; /* 가로 18px 크기입니다. */
  height: 18px; /* 세로 18px 크기입니다. */
  border-radius: 4px; /* 테두리를 미세하게 4px 둥글려 디자인 결을 맞춥니다. */
  border: 1px solid var(--slate-300); /* 연한 테두리입니다. */
  cursor: pointer; /* 클릭 포인터를 적용합니다. */
  flex-shrink: 0; /* 텍스트 폭이 넓어져도 체크박스 가로폭이 줄어들지 않도록 보호합니다. */
  min-height: auto; /* 상위 input의 최소 높이 값을 초기화합니다. */
}

/* 폼 하단의 동의나 유의 사항 안내 미니 텍스트입니다. */
.form-note {
  font-size: 13px; /* 13px 크기로 표기합니다. */
  color: var(--slate-500); /* 음영을 대폭 뺀 옅은 회색 텍스트입니다. */
  line-height: 1.5; /* 가독성을 챙깁니다. */
}

/* 문의 완료 시 성공 메시지를 노출해주는 결과 알림판 박스입니다. */
.form-result {
  padding: 16px; /* 사방 16px 패딩을 줍니다. */
  border-radius: 8px; /* 모서리는 8px 둥글게 다듬습니다. */
  font-size: 14px; /* 14px 글 크기입니다. */
  font-weight: 600; /* 세미볼드체로 가독성을 챙깁니다. */
  display: none; /* 평상시에는 렌더링에서 완전히 숨깁니다. */
}

.form-result.is-visible {
  display: block;
}

.form-result.is-success {
  border: 1px solid #10b981;
  background: #ecfdf5;
  color: #065f46;
}

.form-result.is-error {
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.form-fallback {
  margin: 16px 0 0;
  color: var(--slate-500);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.form-fallback a {
  color: var(--accent-blue);
  font-weight: 700;
}


/* ==========================================================================
   Footer Section (하단 정보 및 저작권 영역)
   ========================================================================== */

/* 푸터 영역의 전체 다크 네이비 테마 디자인입니다. */
.footer {
  background: var(--slate-900); /* 아주 짙은 딥네이비 블랙 컬러로 배경을 칠합니다. */
  color: #ffffff; /* 기본 텍스트는 선명하게 매칭되도록 흰색으로 지정합니다. */
  padding: 80px 24px; /* 위아래로 넉넉하게 80px의 수직 공간을 확보합니다. */
  border-top: 1px solid var(--slate-800); /* 상단과의 경계를 얇게 그어 줍니다. */
}

/* 푸터 내부 정보를 좌우 배치하는 2열 구조 기점입니다. */
.footer-inner {
  max-width: var(--max-width); /* 최대 가로폭 1200px입니다. */
  margin: 0 auto; /* 중앙에 정렬합니다. */
  display: grid; /* 그리드 배치를 활성화합니다. */
  grid-template-columns: 1fr auto; /* 좌측(저작권 및 설명)을 가득 늘리고 우측(링크)을 내용 크기만큼 고정합니다. */
  gap: 48px; /* 간격을 48px로 넓게 벌립니다. */
  align-items: start; /* 위 라인 정렬을 맞춥니다. */
}

/* 푸터 내부 본문 단락의 자잘한 설정입니다. */
.footer p {
  font-size: 13px; /* 13px로 조밀한 카피라이트 느낌을 줍니다. */
  color: var(--slate-400); /* 대비를 줄인 그레이 블루 텍스트를 적용합니다. */
  line-height: 1.7; /* 줄간을 시원하게 늘려 답답함을 끕니다. */
  margin: 0; /* 마진 초기화입니다. */
}

/* 푸터 우측의 외부 바로가기 링크 그룹입니다. */
.footer-links {
  display: flex; /* 링크를 가로로 배치합니다. */
  gap: 24px; /* 각 링크 간격을 24px 벌려 놓습니다. */
  font-size: 13.5px; /* 글 크기 13.5px입니다. */
}

/* 푸터 링크 글자 상태입니다. */
.footer-links a {
  color: var(--slate-400); /* 차분한 그레이 블루 컬러입니다. */
  transition: color 0.2s ease; /* 마우스 오버 시 색상 전환을 유연하게 만듭니다. */
}

/* 푸터 링크 마우스 오버(hover) 시 스타일 변화입니다. */
.footer-links a:hover {
  color: #ffffff; /* 순백색으로 밝게 전환하여 반응성을 알립니다. */
}


/* ==========================================================================
   Mobile Sticky Bar (모바일 전용 하단 고정 액션 바)
   ========================================================================== */

/* 모바일 화면 하단에 둥둥 떠 있는 간이 CTA 고정 박스입니다. */
.mobile-sticky {
  position: fixed; /* 뷰포트 기준 절대 레이어로 위치를 띄웁니다. */
  bottom: 24px; /* 바닥 경계에서 24px 띄워 올려 8의 배수 비율을 맞춥니다. */
  left: 50%; /* 가로축 중앙 정렬을 맞춥니다. */
  transform: translateX(-50%); /* 가로 너비의 절반만큼 왼쪽으로 밀어 정확히 정중앙을 맞춥니다. */
  width: calc(100% - 32px); /* 양 옆 여백을 16px씩 빼서 유연하게 가로를 채웁니다. */
  max-width: 480px; /* 화면이 넓어질 때 무한정 커지지 않도록 480px로 가로 최대 크기를 캡핑합니다. */
  background: #ffffff; /* 카드 색상은 순백색입니다. */
  border: 1px solid var(--slate-200); /* 얇은 외각 경계선입니다. */
  border-radius: 9999px; /* 완벽하게 둥근 캡슐 형태로 깎습니다. */
  padding: 8px 8px 8px 16px; /* 우측 버튼 영역은 8px로 조밀하게, 좌측 글씨 여백은 16px로 넉넉하게 줍니다. */
  display: none; /* 데스크톱 환경에서는 노출하지 않고 완전히 가려 둡니다. */
  align-items: center; /* 세로 중앙 정렬을 맞춥니다. */
  justify-content: space-between; /* 양 끝에 제목 정보와 문의 버튼을 벌려 놓습니다. */
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); /* 캡슐이 둥둥 떠 보이는 깊은 입체 그림자를 줍니다. */
  z-index: 100; /* 최상단 레이어 위로 강제로 띄웁니다. */
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* 온/오프 전환 트랜지션을 부드럽게 줍니다. */
}

/* 모바일 스티키 내부의 간략 정보 텍스트입니다. */
.mobile-sticky .sticky-info {
  font-size: 13px; /* 13px로 조밀하게 표시합니다. */
  font-weight: 700; /* 단단하게 서체를 강조합니다. */
  color: var(--slate-800); /* 본문 짙은 차콜입니다. */
}

/* 모바일 스티키 내부 둥근 알약 스타일의 문의 버튼입니다. */
.mobile-sticky .btn {
  min-height: 40px; /* 슬림하게 40px 높이로 맞춥니다. */
  padding: 0 16px; /* 좌우 여백 16px로 맞춥니다. */
  border-radius: 9999px; /* 완전 둥글게 깎아 모바일 칩 결을 일치시킵니다. */
  font-size: 12.5px; /* 글 크기 12.5px입니다. */
}


/* ==========================================================================
   Cluster & Sub Pages Custom (서브 클러스터/정보용 특화 레이아웃)
   ========================================================================== */

/* 서브 상세 페이지 상단에 위치하는 심플 히어로 구역입니다. */
.cluster-hero {
  background: var(--slate-50); /* 슬레이트 50 연회색을 채웁니다. */
  border-bottom: 1px solid var(--slate-100); /* 밑면 경계선입니다. */
  padding: 80px 24px; /* 사방 여백을 넓게 주어 헤드라인 시각 숨통을 틉니다. */
}

/* 서브 히어로 내부 폭 제한 컨테이너입니다. */
.cluster-hero .section-inner {
  max-width: 900px; /* 정보용 서브 페이지는 읽기 집중도가 높도록 폭을 900px로 좁혀 줍니다. */
  margin: 0 auto; /* 중앙 정렬입니다. */
}

/* 서브 히어로 내부 대형 타이틀입니다. */
.cluster-hero h1 {
  font-size: clamp(28px, 4.5vw, 40px); /* 메인 히어로보다 한 단계 콤팩트한 28px~40px 범위입니다. */
}

/* 스팸 봇이나 자동 폼 제출을 방지하기 위한 보이지 않는 허니팟(Honeypot) 입력 필드 규칙입니다. */
.honeypot {
  position: absolute; /* 보이지 않는 외곽 위치로 빼기 위해 절대 좌표로 고정합니다. */
  left: -9999px; /* 화면 좌측 저 멀리 밖으로 내던집니다. */
  width: 1px; /* 1px 크기입니다. */
  height: 1px; /* 1px 크기입니다. */
  overflow: hidden; /* 보이지 않게 가립니다. */
}


/* ==========================================================================
   Media Queries & Responsive Layouts (반응형 디바이스 너비 분기점)
   ========================================================================== */

/* 태블릿 및 일반 크기의 랩톱 가로폭 분기점 (980px 이하 디바이스 대응) */
@media (max-width: 980px) {
  /* 상단 네비게이션 메뉴 링크는 좁은 화면에서 복잡도를 낮추기 위해 숨깁니다. */
  .nav-links {
    display: none; /* 완전히 가려서 복잡성을 해결합니다. */
  }

  /* 메인 히어로 레이아웃을 1열 세로 배열로 변경하여 좁은 화면에 대처합니다. */
  .hero-inner {
    grid-template-columns: 1fr; /* 1열 배치입니다. */
    gap: 48px; /* 아래 도식과의 간격을 48px로 살짝 좁힙니다. */
    text-align: center; /* 텍스트 정렬을 가독성 있게 중앙 정렬로 전환합니다. */
  }

  /* 눈썹 텍스트, 메인 타이틀, 리드문을 가운데로 보기 좋게 매치합니다. */
  .eyebrow, h1, .lead {
    margin-left: auto;
    margin-right: auto;
  }

  /* 히어로 내 버튼 모음을 중앙 수평 정렬합니다. */
  .hero-actions {
    justify-content: center; /* 중앙 정렬입니다. */
  }

  /* 배지들이 나열되는 영역을 중앙 정렬합니다. */
  .badge-row {
    justify-content: center; /* 중앙 정렬입니다. */
  }

  /* 섹션 하단 버튼 그룹의 간격을 모바일 화면 비율에 맞춰 32px로 약간 조입니다. */
  .section-actions {
    margin-top: 32px; /* 위 영역과의 마진을 32px로 설정합니다. */
  }

  /* 우측 자동화 흐름 데모 패널 카드를 중앙 폭 제한하여 이질감을 없앱니다. */
  .workflow-panel {
    max-width: 480px; /* 480px 너비로 딱 조여 미적인 균형을 잡습니다. */
    margin: 0 auto; /* 중앙 배치합니다. */
    text-align: left; /* 카드 내부 텍스트는 원래대로 왼쪽 정렬로 둡니다. */
  }

  /* 섹션의 헤더도 1열 세로 정렬로 전환합니다. */
  .section-header {
    grid-template-columns: 1fr; /* 1열 배치입니다. */
    gap: 20px; /* 간격 축소입니다. */
  }

  /* 다열 그리드 컬럼 배치를 2열 분할로 조여 레이아웃 깨짐을 방어합니다. */
  .grid.three, .grid.four, .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2열 배치입니다. */
  }

  /* 흐름도 다이어그램 노드 배치도 3열로 좁힙니다. */
  .flow-diagram {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3열 배치입니다. */
    gap: 16px; /* 간격 축소입니다. */
  }

  /* 수평 흐름 화살표를 태블릿 폭에서는 세로 방향 점선 감각으로 보이지 않게 처리합니다. */
  .flow-node:not(:last-child)::after {
    display: none; /* 화살표 기호를 숨겨 노드 배열 혼선을 막습니다. */
  }
}

/* 일반적인 스마트폰 모바일 기기 분기점 (760px 이하 디바이스 대응) */
@media (max-width: 760px) {
  /* 본문 본체 글자 크기를 살짝 콤팩트하게 다듬어 한 화면 밀도를 챙깁니다. */
  body {
    font-size: 14.5px; /* 14.5px로 미세 보정합니다. */
  }

  /* 섹션 여백 패딩을 다소 컴팩트하게 조절하여 불필요한 스크롤 길이를 줄입니다. */
  .section {
    padding: 72px 16px; /* 상하 72px, 좌우 16px 패딩입니다. */
  }

  /* 모바일 하단에 둥둥 떠 있는 sticky 간이 CTA 문의 바를 노출시킵니다. */
  .mobile-sticky {
    display: flex; /* 숨김을 해제하고 화면 하단 고정 캡슐을 노출시킵니다. */
  }

  /* 모바일에서는 버튼이 공간을 꽉 채워 터치하기 수월하도록 풀 너비로 늘립니다. */
  .btn {
    width: 100%; /* 가로 너비 100% 꽉 채웁니다. */
  }

  /* 히어로 내 버튼 모음도 세로 축으로 1개씩 쌓이도록 수직 정렬합니다. */
  .hero-actions {
    flex-direction: column; /* 세로 정렬입니다. */
    width: 100%; /* 너비를 꽉 채웁니다. */
  }

  /* 흐름도 다이어그램을 스마트폰에서는 2열로 크게 배치합니다. */
  .flow-diagram {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2열 배치입니다. */
  }

  /* 자가 진단 폼 레이아웃을 1열 수직 배열로 변경해 터치 영역을 넉넉히 확보합니다. */
  .form-grid {
    grid-template-columns: 1fr; /* 1열 배치입니다. */
    gap: 16px; /* 필드 간격 축소입니다. */
  }

  /* 2열 자리를 차지하던 full 요소 정렬도 풀 너비로 고정 동기화합니다. */
  .field.full {
    grid-column: span 1; /* 1열만 점유하도록 되돌립니다. */
  }

  /* 진단 폼 하단의 선택지 칩 구조도 세로로 길게 나열해 누르기 편하게 맞춥니다. */
  .choice-grid {
    grid-template-columns: 1fr; /* 1열 배치입니다. */
    gap: 16px; /* 여백 간격을 16px로 변경하여 모바일 정합성을 맞춥니다. */
  }

  /* 푸터 2열 구조를 중앙 1열 정렬로 일괄 리매칭합니다. */
  .footer-inner {
    grid-template-columns: 1fr; /* 1열 배치입니다. */
    text-align: center; /* 텍스트 정렬 가운데 맞춤입니다. */
    gap: 32px; /* 간격 조율입니다. */
  }

  /* 푸터 외부 링크 그룹을 중앙 정렬합니다. */
  .footer-links {
    justify-content: center; /* 가로축 가운데 배치입니다. */
    flex-wrap: wrap; /* 오버플로우 방지입니다. */
    gap: 16px; /* 간격을 16px로 약간 조율합니다. */
  }
}

/* 초소형 모바일 기기 분기점 (480px 이하 디바이스 대응) */
@media (max-width: 480px) {
  /* 히어로 여백 패딩을 대폭 조밀하게 만들어 모바일 첫 화면 집중도를 챙깁니다. */
  .hero-inner {
    padding: 64px 16px 80px; /* 상하 여백 호흡 조절입니다. */
  }

  /* 모든 다열 그리드를 수직 1열 레이아웃으로 강제 전환합니다. */
  .grid.two, .grid.three, .grid.four, .tool-grid, .flow-diagram {
    grid-template-columns: 1fr; /* 1열 정밀 동기화입니다. */
    gap: 24px; /* 간격을 24px로 늘려 일정한 여백감을 제공합니다. */
  }

  /* 타임라인 단계를 좁은 화면에서 가로 2열 배치 대신 수직 정렬로 변형합니다. */
  .timeline-item {
    grid-template-columns: 1fr; /* 번호와 내용을 1열로 나란히 내립니다. */
    gap: 24px; /* 사이 여백을 24px로 넓힙니다. */
    padding: 24px; /* 패딩을 24px로 조정하여 일정한 비율을 맞춥니다. */
    text-align: center; /* 텍스트를 가운데 정렬합니다. */
    justify-items: center; /* 그리드 자식 요소도 정중앙 배치합니다. */
  }

  /* 타임라인 번호 원형 구체를 모바일에서 예쁘게 수평 가운데 정렬합니다. */
  .timeline-item::before {
    margin: 0 auto; /* 좌우 마진을 자동으로 두어 완벽히 정가운데 정렬을 고정합니다. */
  }
}