.tk-tools-section{
  margin-top:20px;
}

.tk-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:24px;
}

.tk-section-header h2{
  font-size:22px;
  font-weight:900;

  color:#0f172a;
}

.tk-tools-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.tk-tools-search{
  width:240px !important;
  height:42px !important;
}

#toolGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:20px;
}

.tk-tool-card{
  position:relative;

  display:flex;
  flex-direction:column;

  gap:22px;

  padding:28px;

  min-height:320px;

  border-radius:32px;

  background:rgba(255,255,255,0.72);

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.8);

  overflow:hidden;

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;

  cursor:pointer;

  box-shadow:
    0 10px 30px rgba(15,23,42,0.04);
}

.tk-tool-card::before{
  content:'';

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.24),
      transparent
    );

  opacity:0;

  transition:.28s ease;
}

.tk-tool-card:hover{
  transform:
    translateY(-8px);

  box-shadow:
    0 28px 60px rgba(15,23,42,0.12);

  border-color:
    rgba(255,255,255,0.95);
}

.tk-tool-card:hover::before{
  opacity:1;
}

.tk-tool-purple{
  background:
    linear-gradient(
      180deg,
      rgba(139,92,246,0.08),
      rgba(255,255,255,0.88)
    );
}

.tk-tool-blue{
  background:
    linear-gradient(
      180deg,
      rgba(37,99,235,0.08),
      rgba(255,255,255,0.88)
    );
}

.tk-tool-pink{
  background:
    linear-gradient(
      180deg,
      rgba(236,72,153,0.08),
      rgba(255,255,255,0.88)
    );
}

.tk-tool-green{
  background:
    linear-gradient(
      180deg,
      rgba(34,197,94,0.08),
      rgba(255,255,255,0.88)
    );
}

.tk-tool-card:hover{
  transform:
    translateY(-8px)
    scale(1.01);

  border-color:
    rgba(255,255,255,0.95);

  box-shadow:
    0 30px 60px rgba(15,23,42,0.16),
    0 10px 24px rgba(255,255,255,0.24) inset;
}
.tk-tool-card::before{
  content:'';

  position:absolute;

  inset:0;

  border-radius:inherit;

  background:
    radial-gradient(
      circle at top left,
      rgba(255,255,255,0.55),
      transparent 45%
    );

  opacity:0;

  transition:.28s ease;

  z-index:-1;
}

.tk-tool-card:hover::before{
  opacity:1;
}

.tk-tool-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  margin-bottom:22px;
}

.tk-tool-icon{
  width:58px;
  height:58px;

  border-radius:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:28px;

  background:
    rgba(255,255,255,0.72);

  backdrop-filter:blur(20px);

  border:
    1px solid rgba(255,255,255,0.7);

  box-shadow:
    0 10px 24px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.65);
}

.tk-tool-save{
  width:38px;
  height:38px;

  border:none;

  border-radius:50%;

  background:
    rgba(255,255,255,0.82);

  color:#cbd5e1;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:16px;

  cursor:pointer;

  transition:.22s ease;

  backdrop-filter:blur(12px);

  box-shadow:
    0 8px 18px rgba(15,23,42,0.08);
}

.tk-tool-save:hover{
  transform:translateY(-2px);
}

.tk-tool-save.active{
  color:#f59e0b;

  background:#fff;

  transform:scale(1.06);

  box-shadow:
    0 12px 24px rgba(245,158,11,0.24);
}

.tk-tool-card h3{
  font-size:18px;
  font-weight:800;

  color:#0f172a;

  margin-bottom:10px;
}

.tk-tool-card p{
  font-size:13px;
  line-height:1.6;

  color:#64748b;

  margin-bottom:18px;
}

.tk-tool-meta{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-bottom:18px;
}

.tk-tool-chip{
  padding:6px 10px;

  border-radius:999px;

  font-size:11px;
  font-weight:700;
}

.tk-chip-blue{
  background:#dbeafe;
  color:#2563eb;
}

.tk-chip-pink{
  background:#ffe4e6;
  color:#e11d48;
}

.tk-chip-green{
  background:#dcfce7;
  color:#16a34a;
}

.tk-chip-purple{
  background:#f3e8ff;
  color:#9333ea;
}

.tk-tool-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:auto;
}

.tk-tool-usage{
  font-size:12px;
  color:#94a3b8;
}

.tk-tool-open{
  width:42px;
  height:42px;

  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,0.7);

  backdrop-filter:blur(10px);

  color:#2563eb;

  font-size:18px;
  font-weight:700;

  transition:.25s ease;
}

.tk-tool-card:hover .tk-tool-open{
  transform:
    translateX(4px);

  background:#2563eb;

  color:#fff;
}

@media (max-width:1400px){

  #toolGrid{
    grid-template-columns:repeat(3,1fr);
  }

}

@media (max-width:1000px){

  #toolGrid{
    grid-template-columns:repeat(2,1fr);
  }

}
.tk-category-list{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:26px;

  flex-wrap:wrap;
}

.tk-category-btn{
  border:none;

  height:38px;

  padding:0 16px;

  border-radius:999px;

  background:#ffffff;

  color:#475569;

  font-size:13px;
  font-weight:700;

  cursor:pointer;

  transition:.22s ease;

  box-shadow:
    0 4px 14px rgba(15,23,42,0.04);
}

.tk-category-btn:hover{
  transform:translateY(-2px);

  background:#f8fafc;
}

.tk-category-btn.active{
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #06b6d4
    );

  color:#fff;

  box-shadow:
    0 10px 24px rgba(37,99,235,0.22);
}
.tk-category-btn[data-category="전체"].active,
.tk-category-btn[data-category="즐겨찾기"].active{
  background:
    linear-gradient(
      135deg,
      #0f172a,
      #334155
    );
}

.tk-category-btn[data-category="아이스브레이킹"].active{
  background:
    linear-gradient(
      135deg,
      #8b5cf6,
      #c084fc
    );
}

.tk-category-btn[data-category="실시간"].active{
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #06b6d4
    );
}

.tk-category-btn[data-category="진단"].active{
  background:
    linear-gradient(
      135deg,
      #ec4899,
      #fb7185
    );
}

.tk-category-btn[data-category="자기진단"].active{
  background:
    linear-gradient(
      135deg,
      #22c55e,
      #14b8a6
    );
}