/*
 * .tcg-gallery — single square tile, swipeable (CSS scroll-snap, no JS required for touch).
 * assets/js/card-gallery.js adds prev/next buttons + dot sync on top of this.
 */
.tcg-gallery {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1 / 1;
  margin: 1.5rem auto;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.tcg-gallery.tcg-single { aspect-ratio: 1 / 1; }
.tcg-gallery.tcg-single img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tcg-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tcg-track::-webkit-scrollbar { display: none; }

.tcg-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.tcg-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tcg-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.45);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.tcg-gallery:hover .tcg-nav,
.tcg-nav:focus-visible { opacity: 1; }
.tcg-nav:hover { background: rgba(17, 17, 17, 0.7); }
.tcg-prev { left: 0.6rem; }
.tcg-next { right: 0.6rem; }
.tcg-nav[hidden] { display: none; }

.tcg-dots {
  position: absolute;
  bottom: 0.7rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}
.tcg-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.tcg-dot.is-active { background: #fff; }

@media (max-width: 480px) {
  .tcg-gallery { max-width: 100%; border-radius: 0; margin: 1rem 0; }
  .tcg-nav { opacity: 1; } /* touch devices have no hover — always show */
}

/* ── Widget: row of 2-3 recent posts, each its own full swipeable carousel ─── */
/* .widget_tcg_recent_cards_widget is the theme's own wrapper class (before_widget) — always
   present regardless of which sidebar the widget is placed in, so safe to target directly. */
.widget_tcg_recent_cards_widget {
  margin-bottom: 2.5rem;
}
.widget_tcg_recent_cards_widget .widget-title {
  /* Hidden rather than removed from the DOM — screen readers/SEO still get a section label,
     it's just not shown visually (2026-11-09, user wanted the "최근 주제" heading gone). */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.tcg-wrow {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.tcg-wpost {
  flex: 1 1 0;
  min-width: 0; /* let flex children shrink below their content size */
}
/* Reuse .tcg-gallery as-is, just drop the shortcode's standalone sizing/margin for widget use —
   no padding/margin between slides either way (that's already how .tcg-slide/.tcg-track are built:
   full-bleed, edge-to-edge, Facebook-carousel style — nothing to override there). */
.tcg-wpost .tcg-gallery.tcg-widget-gallery {
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
/* Clicking a slide navigates to the post (data-tcg-link, card-gallery.js) — the pointer cursor
   signals that even though the element is a <div>, not an <a>. */
.tcg-gallery[data-tcg-link] .tcg-slide { cursor: pointer; }

@media (max-width: 480px) {
  .tcg-wrow { gap: 0.5rem; }
}