/* ベース */
.wp-pg-wrapper { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif; }
.wp-pg-title { margin: 0 0 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wp-pg-muted { color:#666; font-size: 0.9rem; }
.wp-pg-btn { padding: 8px 12px; border-radius: 10px; border: 1px solid #ccc; background:#fff; cursor:pointer; }

/* グリッド */
#wp-pg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) { #wp-pg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { #wp-pg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { #wp-pg-grid { grid-template-columns: 1fr; } }

.wp-pg-card {
  position: relative;
  border: 1px solid #ddd; border-radius: 12px; overflow: hidden;
  background: #fff; cursor: pointer;
}
.wp-pg-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.wp-pg-meta { padding: 8px; font-size: .9rem; color:#333; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wp-pg-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:70%; }
.wp-pg-date { color:#666; font-size:.8rem; }

/* モーダル */
.wp-pg-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: none; align-items: center; justify-content: center; padding: 16px; z-index: 9999;
}
.wp-pg-modal {
  width: min(960px, 96vw); max-height: 92vh; overflow: auto;
  background:#fff; border-radius: 14px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.wp-pg-modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wp-pg-figure { margin: 12px 0; }
.wp-pg-figure img { max-width: 100%; height: auto; display:block; border:1px solid #eee; border-radius: 8px; }
.wp-pg-detail { font-size:.95rem; color:#333; }

#wp-pg-status { margin: 8px 0 12px; color:#666; }