/* =============================================================
   main-features.css — index.html "왜 우리 프로그램인가?" 섹션(.nk-features)
   전용 오버라이드.

   .nk-feature-card 클래스명이 components.css의 공용 상품 카드 컴포넌트
   (오렌지 테두리 + 중앙 정렬, program-detail-new.html 등에서 재사용)와
   겹친다. index.html은 components.css → main.css 순으로 두 스타일을
   모두 로드하는데, main.css가 border/align-items/text-align을 따로
   재정의하지 않아 components.css 쪽 값(테두리, 중앙 정렬)이 그대로
   새어 들어온다. 공통 CSS 파일(components.css/main.css)은 건드리지 않고,
   이 섹션(.nk-features 하위)에만 좁혀서 되돌린다.
   로드 순서: variables.css → base.css → components.css → header.css →
   main.css → 이 파일(css/main-features.css) → footer.css → ...
   색상·간격은 css/variables.css의 --nk-* 토큰만 사용한다.
   ============================================================= */

.nk-features .nk-feature-card {
  border: none;
  align-items: flex-start;
  text-align: left;
}

/* 보라색 카드(최신 데이터 제공) */
.nk-features .nk-feature-card--lg {
  padding: var(--nk-space-40);
}

/* 초록/파랑/노랑 카드 3개(원하는 정보를 빠르게 / 비즈니스에 필요한 정보를
   한 번에 / 누구나 쉽게 사용할 수 있는 인터페이스) */
.nk-features .nk-feature-card--sm,
.nk-features .nk-feature-card--wide {
  padding: var(--nk-space-24);
}

/* 모바일: 보라색 카드(최신 데이터 제공) 패딩 24px.
   이 파일의 위 규칙(padding:40px, 명시도 0,2,0)이 main.css의
   .nk-feature-card--lg 768/375px 패딩(명시도 0,1,0)보다 항상 이겨서 그
   쪽 모바일 패딩이 안 먹히고 있었다 — 같은 파일 안에서 미디어쿼리로
   다시 덮어써 정리한다. */
@media (max-width: 768px) {
  .nk-features .nk-feature-card--lg {
    padding: var(--nk-space-24);
  }
}