/* ═══ 목록 첫 화면 카드 공통 (2026-10-29 Benson) ═══
   템플릿 관리, 버전 비교, 워크플로우, 문서 대조, 지식베이스 목록 카드를 같은 높이와 호버로 맞춘다.
   카드 안 요소는 그대로 두고 크기, 여백, 그림자, 호버만 정한다. 디자인 토큰이 각짐이라 모서리는 각지게 둔다.
   각 화면 CSS보다 뒤에 읽혀 같은 명시도로 덮는다. */
.vlmops-card-grid, .ppw-card-grid, .pe-gallery { gap: 20px; }

.vlmops-card-grid > .vlmops-card,
.ppw-card-grid > .ppw-card,
.pe-gallery > .pe-tpl-card {
  min-height: 248px;   /* 카드답게 높인다(2026-10-29 Benson, 188px에서) */
  padding: 26px 28px 20px;
  border-color: #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .22s ease;
}
/* 위 가장자리 강조 띠: 호버하면 왼쪽부터 차오른다 */
.vlmops-card-grid > .vlmops-card::before,
.ppw-card-grid > .ppw-card::before,
.pe-gallery > .pe-tpl-card::before {
  content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: #2970ff; transform: scaleX(0); transform-origin: left center;
  transition: transform .32s cubic-bezier(.2, .7, .2, 1); pointer-events: none;
}
.vlmops-card-grid > .vlmops-card:hover, .vlmops-card-grid > .vlmops-card:focus-within,
.ppw-card-grid > .ppw-card:hover, .ppw-card-grid > .ppw-card:focus-within,
.pe-gallery > .pe-tpl-card:hover, .pe-gallery > .pe-tpl-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(41, 112, 255, .45);
  box-shadow: 0 16px 32px -14px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .05);
}
.vlmops-card-grid > .vlmops-card:hover::before, .vlmops-card-grid > .vlmops-card:focus-within::before,
.ppw-card-grid > .ppw-card:hover::before, .ppw-card-grid > .ppw-card:focus-within::before,
.pe-gallery > .pe-tpl-card:hover::before, .pe-gallery > .pe-tpl-card:focus-within::before { transform: scaleX(1); }
.vlmops-card-grid > .vlmops-card:active, .ppw-card-grid > .ppw-card:active, .pe-gallery > .pe-tpl-card:active { transform: translateY(-1px); }

/* 제목: 한 단계 키우고 호버하면 강조색 */
.vlmops-card-grid > .vlmops-card .vlmops-card-head > h3,
.ppw-card-grid > .ppw-card .ppw-card-top > h2,
.pe-gallery > .pe-tpl-card > h3 { font-size: 16px; transition: color .18s ease; }
.vlmops-card-grid > .vlmops-card:hover .vlmops-card-head > h3,
.ppw-card-grid > .ppw-card:hover .ppw-card-top > h2,
.pe-gallery > .pe-tpl-card:hover > h3 { color: #1b58d4; }

/* 설명: 두 줄까지 보이고 자리를 두 줄로 고정해 카드 높이를 맞춘다 */
.vlmops-card-grid > .vlmops-card .vlmops-card-desc,
.ppw-card-grid > .ppw-card > p,
.pe-gallery > .pe-tpl-card > p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  min-height: 40px; margin-top: 6px; white-space: normal; line-height: 20px;
}

/* 아래 줄: 가는 구분선으로 본문과 나눈다 */
.vlmops-card-grid > .vlmops-card .vlmops-card-foot,
.ppw-card-grid > .ppw-card .vlmops-card-foot,
.pe-gallery > .pe-tpl-card > div:last-child {
  min-height: 39px; margin-top: auto; padding-top: 16px; border-top: 1px solid #f1f5f9;   /* 칩이 있든 없든 구분선 높이를 맞춘다 */
}
.vlmops-card-grid > .vlmops-card .vlmops-card-meta,
.ppw-card-grid > .ppw-card .ppw-card-meta { margin-top: 12px; margin-bottom: 14px; }
.pe-gallery > .pe-tpl-card > .vlmops-card-meta { margin-top: 12px; margin-bottom: 14px; }   /* 템플릿 관리 카드와 같은 문서유형 줄(2026-11-04) */
/* 버전 비교 카드: 제목 위 여백을 템플릿 관리 카드(아이콘과 제목 사이 14px)와 맞추고, 버전 칩 색을 고정한다(이 화면에는 칩 색 변수가 없다) */
.pe-gallery > .pe-tpl-card > h3 { margin-top: 0; }
.pe-gallery > .pe-tpl-card .vlmops-version-chip { border-color: #c9d9ff; background: #eaf1ff; color: #1b58d4; }

/* 아이콘 칸 되살림(2026-10-29 Benson, #669에서 뺀 것): 첫 줄은 아이콘과 별, 더보기. 제목은 다음 줄 */
.vlmops-card-grid > .vlmops-card .vlmops-card-head:has(> .vlmops-card-icon),
.ppw-card-grid > .ppw-card .ppw-card-top:has(> .ppw-card-icon) { flex-wrap: wrap; row-gap: 14px; }
.vlmops-card-grid > .vlmops-card .vlmops-card-head > .vlmops-card-icon,
.ppw-card-grid > .ppw-card .ppw-card-top > .ppw-card-icon { order: 0; flex: none; }
.vlmops-card-grid > .vlmops-card .vlmops-card-head:has(> .vlmops-card-icon) > :not(h3):not(.vlmops-card-icon),
.ppw-card-grid > .ppw-card .ppw-card-top:has(> .ppw-card-icon) > .ppw-card-actions { order: 1; margin-left: auto; }
.vlmops-card-grid > .vlmops-card .vlmops-card-head:has(> .vlmops-card-icon) > h3,
.ppw-card-grid > .ppw-card .ppw-card-top:has(> .ppw-card-icon) > h2 { order: 2; flex: 1 0 100%; }
.pe-gallery > .pe-tpl-card > .pe-tpl-icon { margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
  .vlmops-card-grid > .vlmops-card, .ppw-card-grid > .ppw-card, .pe-gallery > .pe-tpl-card,
  .vlmops-card-grid > .vlmops-card::before, .ppw-card-grid > .ppw-card::before, .pe-gallery > .pe-tpl-card::before { transition: none; }
  .vlmops-card-grid > .vlmops-card:hover, .ppw-card-grid > .ppw-card:hover, .pe-gallery > .pe-tpl-card:hover { transform: none; }
}