@charset "utf-8";

/* ==========================================================================
   Main Page Responsive — BP 2개 (1024 tablet / 600 mobile)
   ========================================================================== */

/* ========== 태블릿 (≤1024) ========== */
@media (max-width: 1024px) {
  .hp-hero { min-height: 88vh; align-items: flex-start; padding-top: calc(var(--header-height) + 24px); padding-bottom: 44px; }
  .hp-hero__bg { background-position: 74% center; }
  .hp-hero__copy { max-width: 100%; }
  .hp-hero__kpis { gap: 24px; }
  .hp-kpi__ic { width: 58px; height: 58px; }
  .hp-kpi__ic svg { width: 28px; height: 28px; }

  .hp-stats { grid-template-columns: repeat(2, 1fr); }
  .hp-split { grid-template-columns: 1fr; gap: 36px; }
  .hp-split--flip .hp-split__copy { order: 0; }
  .hp-split__visual { order: 2; }
  .hp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hp-pats { grid-template-columns: repeat(2, 1fr); }
  .explore-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hp-cta-wrap { padding: 80px 0; }
  .hp-cta { padding: 52px 34px; }
  .hp-csbanner { padding: 16px 0 80px; }
  .csbanner { padding: 40px 44px; min-height: 180px; gap: 24px; }
  .csbanner__title { font-size: 25px; }
}

/* ========== 모바일 (≤600) ========== */
@media (max-width: 600px) {
  .hp-hero { min-height: 86vh; align-items: center; padding-top: calc(var(--header-height) + 28px); padding-bottom: 40px; }
  .hp-hero__lead { margin-top: 5px; padding-top: 16px; }
  .hp-hero__sub { margin-top: 10px; }
  .hp-hero__cta { margin-top: 34px; }
  .hp-hero__bg { background-position: 66% center; }
  .hp-hero__scrim { background: linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.74) 50%, rgba(10,10,11,.54) 100%), linear-gradient(0deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,0) 100%); }
  .hp-hero__wordmark { font-size: clamp(54px, 16vw, 78px); }
  .hp-hero__kpis { grid-template-columns: repeat(2, 1fr); gap: 22px 28px; }
  .hp-kpi { max-width: none; }

  .hp-stats { grid-template-columns: 1fr 1fr; }
  .hp-stat { padding: 24px 18px; }
  .hp-grid--3, .hp-grid--2 { grid-template-columns: 1fr; }
  .hp-pats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .explore-grid { grid-template-columns: 1fr; }
  .explore-card { aspect-ratio: 16 / 9; }
  .hp-pat { padding: 20px 16px; }
  .hp-pat b { font-size: 28px; }
  .hp-cta-wrap { padding: 56px 0; }
  .hp-cta { padding: 40px 22px; }
  .hp-csbanner { padding: 8px 0 56px; }
  .csbanner { flex-direction: column; align-items: flex-start; gap: 22px; padding: 32px 26px; min-height: 0; }
  .csbanner__title { font-size: 22px; }
  .csbanner__btn { width: 100%; justify-content: center; }
}