/* =====================================================================
   MindWiki Page Common Styles
   공통으로 사용되는 페이지 레이아웃 및 컴포넌트 스타일
   ===================================================================== */

/* === 카드 레이아웃 공통 스타일 === */
.mw-card-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.mw-card-content {
  flex: 1;
  min-width: 0;
}

.mw-card-thumbnail {
  flex-shrink: 0;
  width: 200px;
}

.mw-card-thumbnail img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.mw-card-thumbnail a {
  display: block;
}

.mw-card-thumbnail a:hover img {
  transform: scale(1.02);
}

/* === 카드 헤더 스타일 === */
.mw-card-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.mw-card-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  flex: 1;
  display: flex;
  align-items: center;
}

.mw-card-title a {
  color: #1e293b;
  text-decoration: none;
  transition: color 0.3s ease;
}

.mw-card-title a:hover {
  color: #1bb2d3;
}

.mw-card-badge {
  flex-shrink: 0;
}

/* === 카드 본문 스타일 === */
.mw-card-summary {
  margin: 0 0 16px 0;
  color: #64748b;
  line-height: 1.6;
  font-size: 15px;
}

/* === 카드 메타 정보 === */
.mw-card-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: #666;
  font-size: 13px;
}

.mw-card-meta span {
  color: #64748b;
  font-size: 14px;
}

/* === 빈 상태 스타일 === */
.mw-empty-state {
  text-align: center;
  padding: 40px 20px;
}

.mw-empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.mw-empty-state-title {
  font-weight: 500;
  margin-bottom: 8px;
}

.mw-empty-state-desc {
  font-size: 14px;
  opacity: 0.8;
  color: #64748b;
}

/* === 반응형 === */
@media (max-width: 768px) {
  .mw-card-layout {
    flex-direction: column;
    gap: 16px;
  }
  
  .mw-card-thumbnail {
    width: 100%;
  }
  
  .mw-card-thumbnail img {
    height: 200px;
  }
  
  .mw-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .mw-card-title {
    font-size: 18px;
    width: 100%;
  }
}

/* === 디버그 스타일 (개발 환경 전용) === */
.mw-debug {
  background: #222;
  color: #ddd;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
  white-space: pre-wrap;
  margin-bottom: 10px;
  font-family: monospace;
}