/* ILIAS Desktop — 카테고리 */

.cat-head { padding: 32px 0 16px; }
.cat-head .crumb { color: var(--ink-3); font-size: 14px; }
.cat-head h1 { font-size: 34px; margin-top: 8px; }
.cat-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.cat-toolbar .count { color: var(--ink-3); font-size: 15px; }
.cat-toolbar select {
  width: auto; min-width: 160px; height: 38px; padding: 0 32px 0 14px;
  font-weight: 600;
}

.grid { display: grid; gap: 20px; padding-bottom: 60px; }
.grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(4, 1fr); }
}

/* 전체 카테고리 인덱스 */
.cat-all-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px; padding: 24px 0 60px;
}
.cat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  transition: box-shadow .15s, transform .15s;
}
.cat-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--navy); }
.cat-tile-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--navy-l); color: var(--navy);
  display: grid; place-items: center; font-size: 26px;
}
.cat-tile-name { font-size: 17px; font-weight: 700; }
.cat-tile-count { font-size: 14px; color: var(--ink-3); }