/* ───────────────────────────────────────────────
   block_icon_cards — 중앙 sect-head + lordicon 카드 3개 (light / dark 2톤)
   라이브의 철학 섹션(dark) / 차별성 섹션(light) 공용 블록.
   sadari-core 룩: --space-section 여백, sect-head 공통 패턴,
   --r-lg 라운드 + 1px var(--ink-200) 보더(differentiators/course_cards 톤), hover 없음.
   ─────────────────────────────────────────────── */

/* ==== 섹션 톤 ==== */
.block_icon_cards {
  padding-block: var(--space-section);
  background: var(--paper);
}
.block_icon_cards--dark {
  background: var(--ink-50);   /* 흰색보다 한 톤 업 옅은 배경 */
}

/* ==== 타이틀 (상단 중앙 — sect-head 공통) ==== */
.block_icon_cards__head {
  margin-bottom: var(--space-2xl);
}
.block_icon_cards--dark .block_icon_cards__head .sect-head__title {
  color: var(--ink-900);   /* 옅은 배경 위 다크 타이틀 */
}

/* ==== 카드 그리드 (3열 → 모바일 1열) ==== */
.block_icon_cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* ==== 카드 — --r-lg 라운드, light는 1px var(--ink-200) 보더 ==== */
.block_icon_cards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xl);
  border-radius: var(--r-lg);
  background: var(--white);
}
.block_icon_cards--light .block_icon_cards__card,
.block_icon_cards--dark .block_icon_cards__card {
  border: 1px solid var(--ink-200);
}

/* ==== 카드 아이콘 (중앙 48px) ==== */
.block_icon_cards__card-icon {
  display: block;
  font-size: 0;
  margin-bottom: var(--space-lg);
}
.block_icon_cards__card-icon lord-icon {
  width: 48px;
  height: 48px;
  display: block;
}

/* ==== 카드 제목 ==== */
.block_icon_cards__card-title {
  font-family: var(--font-kr);
  font-size: var(--fs-title-md);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  line-height: 1.4;
  color: var(--ink-900);
  margin: 0 0 var(--space-sm);
}
.block_icon_cards--dark .block_icon_cards__card-title {
  color: var(--ink-900);
}

/* ==== 카드 설명 ==== */
.block_icon_cards__card-desc {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-loose);
  color: var(--ink-500);
  margin: 0;
}

/* ==== 반응형 ==== */
@media (max-width: 900px) {
  .block_icon_cards__grid {
    grid-template-columns: 1fr;
  }
}