.hub { max-width: 1200px; margin: 0 auto; padding: var(--s8) var(--page-gutter) var(--s12); display: flex; flex-direction: column; gap: var(--s12); }
.hub__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.hub__main { display: flex; flex-direction: column; gap: var(--s12); }
.hub__lead { max-width: 56ch; font-size: 16px; }
.hub__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); }

.hub-card {
  display: flex; flex-direction: column; gap: var(--s3); height: 100%; padding: var(--s8) var(--s5, 20px);
  transition: translate var(--t-dropdown) var(--ease), box-shadow var(--t-dropdown) var(--ease);
}
.hub-card:hover { translate: 0 -2px; box-shadow: var(--shadow-float); }
/* 글래스 카드 — 색 없이 반투명 유리 질감, 포인트는 네이비 아이콘 타일 하나 */
.hub-card, .hub-card--aqua, .hub-card--lime {
  background: linear-gradient(160deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.5));
  border: 1px solid rgb(255 255 255 / 0.85);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 8px 32px rgb(36 54 64 / 0.06);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.hub-card:hover { background: linear-gradient(160deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.62)); box-shadow: 0 1px 0 #fff inset, 0 16px 40px rgb(36 54 64 / 0.1); }
.hub-card .t-secondary { color: var(--secondary); opacity: 1; }
.hub-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-control); background: var(--accent); color: #fff; margin-bottom: var(--s6); box-shadow: 0 6px 16px rgb(36 54 64 / 0.22); }
.hub-card__meta { margin-top: auto; padding-top: var(--s6); color: var(--secondary); }

@media (max-width: 1099px) { .hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .hub { padding-top: var(--s6); gap: var(--s8); }
  .hub__grid { grid-template-columns: minmax(0, 1fr); }
}

/* 유리가 비쳐 보이도록 배경에 아주 옅은 네이비 빛 번짐 */
body:has(.hub) { background: radial-gradient(60% 50% at 15% 10%, rgb(36 54 64 / 0.08), transparent 70%), radial-gradient(50% 45% at 90% 35%, rgb(87 120 140 / 0.10), transparent 70%), linear-gradient(160deg, #e9eef1 0%, #f3f6f7 60%); background-attachment: fixed; }