/*
 * apps/tools.css
 * "🛠️ 도구" 허브 페이지(tools.html) 전용 스타일 - 도구 카드 3개를 그리드로 배치.
 */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  transition: background 0.15s ease, transform 0.05s ease;
}

.tool-card:hover {
  background: var(--color-primary-soft);
}

.tool-card:active {
  transform: scale(0.98);
}

.tool-icon {
  font-size: 28px;
}

.tool-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
}

.tool-desc {
  font-size: 12.5px;
  color: var(--color-text-sub);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }
}