/* =====================================================================
   MindWiki Category Page Styles
   카테고리 페이지(category.php) 전용 스타일
   ===================================================================== */

/* === 카테고리 헤더 === */
.category-header {
  display: block !important; /* flex 대신 block으로 변경하여 세로 배치 */
  margin-bottom: 24px;
}

/* head-box와 함께 사용될 때 하단 테두리 색상만 회색으로 변경 */
.box.head-box.category-header {
  border: none !important; /* 기존 border 제거 */
  border-top: 2px solid #1bb2d3 !important;
  border-left: 2px solid #1bb2d3 !important;
  border-right: 2px solid #1bb2d3 !important;
  border-bottom: 2px solid #1bb2d3 !important;
}

.category-header h1 {
  margin: 0 0 16px 0; /* 하위 카테고리와의 간격 확보 */
}

/* === 카테고리 설명 영역 === */
.category-description {
  margin-bottom: 24px;
}

/* === 페이지네이션 === */
.pagination {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.pagination .btnp {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  text-decoration: none;
  color: #64748b;
  transition: all 0.3s ease;
}

.pagination .btnp:hover:not([style*="opacity"]) {
  background: #f8fafc;
  border-color: #1bb2d3;
  color: #1bb2d3;
}

.pagination .btnp[style*="opacity"] {
  opacity: 0.4;
  pointer-events: none;
}

.pagination .btnp.current {
  background: #1bb2d3;
  color: #fff;
  border-color: #1bb2d3;
}

/* === 하위 카테고리 목록 === */
.subcategories-list {
  margin-bottom: 24px;
}

.subcategories-list h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
}

.subcategories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.subcategory-item {
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.subcategory-item:hover {
  border-color: #1bb2d3;
  box-shadow: 0 2px 8px rgba(27, 178, 211, 0.2);
}

.subcategory-item a {
  color: #1e293b;
  text-decoration: none;
  font-weight: 500;
}

.subcategory-item a:hover {
  color: #1bb2d3;
}

/* === 모바일 반응형 === */
@media (max-width: 768px) {
  .subcategories-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
  
  .pagination {
    justify-content: flex-start;
  }
}