@import url(normalize.css);
@import url(reset.css);

:root {
  /* 레이아웃 */
  --container-max: 1272px;
  --container-tablet: 688px;
  --container-mobile: 360px;

  /* 폰트 변수 */
  --base-unit: 27px;
  --base-font: 16px;

  /* 여백 */
  --tablet-side-pd: 40px; /* 태블릿 좌우 여백 */
  --mob-side-pd: 16px; /* 모바일 좌우 여백 */

  /* 폰트 패밀리 */
  --font-primary: "Noto Sans KR", sans-serif;
  --font-logo: "Noto Sans", sans-serif;
  --font-icon: "Material Icons", sans-serif;

  /* 헤딩 요소 */
  --heading-3xl: calc(var(--base-font) * 4.5); /* 72px */
  --heading-2xl: calc(var(--base-font) * 3); /* 48px */
  --heading-xl: calc(var(--base-font) * 2); /* 32px */
  --heading-l: calc(var(--base-font) * 1.25); /* 20px */
  --heading-logo: calc(var(--base-font) * 1.125); /* 18px */

  /* 본문 크기 */
  --body-2xl: calc(var(--base-font) * 2.25); /* 36px */
  --body-xl: calc(var(--base-font) * 1.5); /* 24px */
  --body-l: calc(var(--base-font) * 1.25); /* 20px */
  --body-m: var(--base-font); /* 16px */
  --body-s: calc(var(--base-font) * 0.875); /* 14px */

  /* 굵기 (Font Weight) */
  --weight-bold: 700;
  --weight-medium: 500;
  --weight-regular: 400;

  /* 컬러 변수 */
  --color-primary: #155dfc;
  --color-primary-75: rgba(21, 93, 252, 0.75);
  --color-primary-10: rgba(21, 93, 252, 0.1);
  --color-black: #212121;
  --color-gray: #717282;
  --color-gray-20: rgba(113, 114, 130, 0.2);
  --color-white: #ffffff;

  /* 배경 */
  --color-bg-light: #f9fafb;
  --color-bg-blue: #e5f2ff;
  --color-bg-gray: #f0f0f0;
  --color-bg-purple: #faf5ff;

  /* 그라디언트 */
  --gradient-blue-green: linear-gradient(90deg, #155dfc 0%, #00c950 100%);
  --gradient-blue-cyan: linear-gradient(90deg, #2b7fff 0%, #00b8db 100%);
  --gradient-yellow-orange: linear-gradient(90deg, #f0b100 0%, #ff6900 100%);
  --gradient-purple-pink: linear-gradient(90deg, #ad46ff 0%, #f6339a 100%);
  --gradient-bg: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
  --gradient-bg-blue-green: linear-gradient(
    90deg,
    rgba(43, 127, 255, 0.08) 0%,
    rgba(43, 127, 255, 0) 50%,
    rgba(0, 201, 80, 0.05) 100%
  );
}
/* body */
body {
  font-family: var(--font-primary);
}
/* 헤딩 위계 */
.text-heading-3xl {
  font-size: var(--heading-3xl);
  font-weight: var(--weight-bold);
  line-height: calc(var(--base-unit) * 3);
}
.text-heading-2xl {
  font-size: var(--heading-2xl);
  font-weight: var(--weight-bold);
  line-height: calc(var(--base-unit) * 2);
}
.text-heading-xl {
  font-size: var(--heading-xl);
  font-weight: var(--weight-bold);
  line-height: calc(var(--base-unit) * 1.168);
}
.text-heading-l {
  font-size: var(--heading-l);
  font-weight: var(--weight-bold);
  line-height: var(--base-unit);
}
.text-logo {
  font-size: var(--heading-l);
  font-weight: var(--weight-bold);
  line-height: var(--base-unit);
}

/* 레이아웃 */
section {
  padding: calc(var(--base-unit) * 4) 0;
}
@media (max-width: 768px) {
  section {
    padding: calc(var(--base-unit) * 2) 0;
  }
}
@media (max-width: 360px) {
  section {
    padding: calc(var(--base-unit) * 1) 0;
  }
}
.hidden {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
}
.flex-column {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.margin-auto {
  margin-inline: auto;
}
/* ─── 컨테이너 (Container) ──────────────────────────────── */
.container {
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
  max-width: var(--container-max);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .container {
    padding: 0 40px;
    max-width: var(--container-tablet);
  }
}

@media (max-width: 360px) {
  .container {
    padding: 0 16px;
    max-width: 328px;
  }
}
/* icon-box */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background-color: var(--color-primary-10); /* 연한 블루 배경 */
  border-radius: 14px;
}
.icon-box span {
  font-size: var(--body-xl);
  color: var(--color-primary);
}

/* 버튼 */
.btn {
  display: inline-block;
  padding: 20px 40px;
  background-color: var(--color-primary);
  color: white;
  transition: 0.3s ease;
  box-sizing: border-box;
  border-radius: 10px;
}
.btn-header {
  padding: 4px 9px;
}
.btn-mob {
  padding: 16px 116px;
}
.btn:hover {
  box-shadow: 0 8px 20px rgba(21, 93, 252, 0.25);
  background-color: #2467ff;
}
/* status-item */
.stat-item {
  display: inline-flex;
  gap: 1px;
  align-items: center;
  flex-direction: column;
  background: var(--color-white);
}
.stat-item > p {
  font-size: var(--body-s);
  line-height: var(--base-unit);
  color: var(--color-gray);
  text-align: center;
}
.stat-item strong {
  background: var(--gradient-blue-green);
  background-clip: text;
  font-size: var(--body-xl);
  font-weight: var(--weight-bold);
  color: transparent;
}
/* 뱃지 */
.badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 20px;
  box-shadow: 4px 16px 15px -7px rgba(0, 0, 0, 0.1);
  background: var(--gradient-blue-green);
  font-size: var(--body-s);
  color: white;
  border-radius: 9999px;
}
.badge .material-icons-outlined {
  font-size: var(--body-s);
}