/* BOK 매거진 그리드 위젯 (테마 변수는 bok 레이아웃에서 상속) */
.bokw-masonry {
  column-gap: 28px;
  column-count: 4;
}
.bokw-cols-2 { column-count: 2; }
.bokw-cols-3 { column-count: 3; }
.bokw-cols-4 { column-count: 4; }
.bokw-cols-5 { column-count: 5; }

.bokw-card {
  break-inside: avoid;
  margin-bottom: 44px;
  display: block;
}

.bokw-thumb {
  display: block;
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--bok-card-bg, #f4f4f4);
}
.bokw-thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.2s;
}
.bokw-thumb:hover img { opacity: 0.85; }

.bokw-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--bok-text, #111);
  margin-bottom: 8px;
  word-break: keep-all;
  text-decoration: none;
}
.bokw-title:hover { color: var(--bok-nav-hover, #b0b0b0); }

.bokw-summary {
  font-size: 13px;
  color: var(--bok-text-sub, #888);
  line-height: 1.65;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bokw-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--bok-text-muted, #bbb);
}
.bokw-board {
  color: var(--bok-text-sub, #888);
  border: 1px solid var(--bok-border-mid, #e2e2e2);
  padding: 1px 8px;
}
.bokw-cmt { font-style: normal; }

@media (max-width: 1400px) {
  .bokw-masonry, .bokw-cols-5 { column-count: 3; }
  .bokw-cols-2 { column-count: 2; }
}
@media (max-width: 900px) {
  .bokw-masonry, .bokw-cols-3, .bokw-cols-4, .bokw-cols-5 { column-count: 2; }
}
@media (max-width: 540px) {
  .bokw-masonry, .bokw-cols-2, .bokw-cols-3, .bokw-cols-4, .bokw-cols-5 { column-count: 1; }
}