/* ============================================================
   Cards 컴포넌트 스타일 (Enterprise Panel UI)
   Atlassian & Salesforce Inspired — Sharp, border-focused, flat structure
   ============================================================ */

/* ===== Stats Grid (통계 그리드) ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* ===== Stat Card (통계 카드 — Salesforce/Jira Metrics Panel) ===== */
.stat-card {
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md); /* 4px: Atlassian standard */
  padding: var(--space-4) var(--space-5);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

/* 상단 메트릭 구분선 — Atlassian 느낌의 얇고 심플한 선 */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  opacity: 0.8;
  transition: opacity var(--transition-base);
}

/* 호버 시 플랫 테두리 강조 (떠오르지 않는 탄탄함) */
.stat-card:hover {
  border-color: var(--primary-light);
  background: var(--bg-canvas);
  box-shadow: var(--shadow-md);
}

/* 통계 라벨 (Atlassian 메트릭 명칭) */
.stat-label {
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-2);
}

/* 통계 숫자 값 */
.stat-value {
  font-size: var(--text-5xl); /* 28px */
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

/* 좌측 악센트 보더 변형 (Monday.com/Jira Status Bar) */
.stat-card-accent {
  border-left: 4px solid var(--accent);
}

.stat-card-accent.info { border-left-color: var(--info); }
.stat-card-accent.success { border-left-color: var(--success); }
.stat-card-accent.warning { border-left-color: var(--warning); }
.stat-card-accent.danger { border-left-color: var(--danger); }


/* ===== Card (기본 카드 — Enterprise Content Board) ===== */
.card {
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md); /* 4px: 날렵하고 전문적인 마감 */
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

/* 대시보드 보드 호버: 테두리만 은은하게 활성 */
.card:hover {
  border-color: var(--border-strong);
}

/* 카드 헤더 — Jira/Notion Header 스타일 */
.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-subtle); /* #F4F5F7 Atlassian Header Color */
}

.card-header h2 {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* 카드 본문 */
.card-body {
  padding: var(--space-5) var(--space-5);
}


/* ===== Gallery Grid ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}


/* ===== Gallery Card (갤러리 카드) ===== */
.gallery-card {
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md); /* 4px */
  overflow: hidden;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.gallery-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

/* 썸네일 영역 (4:3 비율) */
.gallery-card .card-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-5xl);
  color: var(--text-secondary);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}

.gallery-card .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 썸네일 내부 과목 배지 */
.gallery-card .card-thumb .subject-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 1px var(--space-2);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-sm); /* 3px */
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 갤러리 카드 콘텐츠 영역 */
.gallery-card .card-body {
  padding: var(--space-4);
}

.gallery-card .card-body h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.gallery-card .card-body p {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-normal);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ===== Premium Card (Salesforce Elevated Card) ===== */
.card-premium {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md); /* 4px */
  background: var(--bg-white);
  box-shadow: var(--shadow-md);
}

.card-premium:hover {
  border-color: var(--primary-light);
}