/* Paperlogy 웹폰트 (jsDelivr CDN) */
@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Paperlogy', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, sans-serif;
  background: #f6f7fb;
  color: #1f2937;
  line-height: 1.6;
}
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.hub-header {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  padding: 56px 0 48px;
  text-align: center;
}
.hub-header h1 { font-size: 2.2rem; margin-bottom: 10px; }
.hub-header .subtitle { font-size: 1.05rem; color: #e0e7ff; }
.hub-header strong { color: #fff; }

main.container { padding-top: 64px; padding-bottom: 40px; }
.cat-section { margin-bottom: 44px; }
.cat-section h2 {
  font-size: 1.35rem;
  margin-bottom: 18px;
  padding-left: 8px;
  border-left: 4px solid #4f46e5;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 14px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(79,70,229,.12);
  border-color: #c7d2fe;
}
.card-emoji { font-size: 1.8rem; }
.card-name { font-weight: 700; font-size: 1.02rem; }
.card-desc { font-size: .85rem; color: #6b7280; }

.hub-footer {
  text-align: center;
  padding: 32px 0;
  color: #9ca3af;
  font-size: .85rem;
}

@media (max-width: 480px) {
  .hub-header h1 { font-size: 1.7rem; }
  .card-grid { grid-template-columns: 1fr 1fr; }
}