/* ---------------------------------------------------------------------------
   AUTOMATIC (CSS-ONLY) SLIDING BANDS OF THE APEX MARKETPLACE.

   The operator's instruction (2026-09-28): "광고용으로 보이는 부분들은 슬라이드 방식으로
   물건들이 자동으로 보여지게 만들어 (카테고리 별로 자동 노출 — 클릭하면 해당 카테고리 상품으로
   연결)". So the advert-looking bands of the homepage — the hero band, the category tile
   strip — rotate through the ten CATEGORIES by themselves, and every slide is a real
   link to /c/<slug> (a category) with real products from that category on it.

   NO JAVASCRIPT IS INVOLVED, deliberately:
     * the movement is one @keyframes transform on the track (translateX),
     * it pauses on hover and while the band holds keyboard focus,
     * `prefers-reduced-motion: reduce` stops the movement and turns the band into an
       ordinary horizontally scrollable strip, so every slide is still reachable,
     * all slides are in the HTML from the first byte (server rendered, SEO + no-JS).

   Nothing here is a stock photo or a fabricated banner: every thumbnail is a REAL
   product photograph from that category (or, only when a product genuinely has no
   photo, the deterministic artwork the rest of the site uses).

   Layout-shift safety: the viewport clips (overflow: hidden) and every slide is a
   flex item on a single row with a fixed basis, so the band's height never changes
   while it slides, and it can never widen the page.
   --------------------------------------------------------------------------- */

.mp-carousel {
  position: relative;
  margin: 0 0 18px;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface);
  box-shadow: var(--cy-shadow-xs, 0 1px 2px rgba(15, 17, 17, .08));
  overflow: hidden;
}

/* The band holds keyboard focus: stop moving so the focused link stays put, and let
   the visitor scroll the slides themselves. */
.mp-carousel:focus-within .mp-carousel__track { animation: none; transform: none; }
.mp-carousel:focus-within .mp-carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }

.mp-carousel__viewport { overflow: hidden; }

.mp-carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  will-change: transform;
  animation-name: mp-category-slide;
  animation-duration: calc(var(--mp-slide-step, 5s) * var(--mp-slide-count, 10));
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Pause while the visitor is reading / pointing at the band. */
.mp-carousel:hover .mp-carousel__track { animation-play-state: paused; }

.mp-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  padding: 20px 22px;
  scroll-snap-align: start;
}

.mp-carousel__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cy-muted-2);
}

.mp-carousel__title { margin: 0 0 8px; font-size: 24px; line-height: 1.2; color: var(--cy-text); }
.mp-carousel__title a { color: inherit; text-decoration: none; }
.mp-carousel__title a:hover { text-decoration: underline; }

.mp-carousel__blurb { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--cy-muted); max-width: 46ch; }
.mp-carousel__meta { margin: 0 0 14px; font-size: 12px; color: var(--cy-muted-2); }

.mp-carousel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-carousel__card {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
}
.mp-carousel__card:hover .mp-carousel__card-title { text-decoration: underline; }

.mp-carousel__card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  color: var(--cy-text);
  min-height: 2.7em;
}

.mp-carousel__card .cyc-price { font-size: 13px; }

/* The thumbnail: a real photo when the product has one, the deterministic artwork
   when it genuinely has none. Fixed 1:1 box so nothing shifts while loading. */
.mp-thumb {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-sm);
  background: var(--cy-surface-2);
}
.mp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-thumb > .sf-art { position: absolute; inset: 0; }

/* -------------------------------------------------- the category tile marquee */
.mp-tiles--marquee { overflow: hidden; position: relative; }
.mp-tiles__viewport { overflow: hidden; }

.mp-tiles__track {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  animation: mp-tiles-marquee var(--mp-marquee-duration, 70s) linear infinite;
  will-change: transform;
}

.mp-tiles--marquee:hover .mp-tiles__track,
.mp-tiles--marquee:focus-within .mp-tiles__track { animation-play-state: paused; }

.mp-tiles__item { flex: 0 0 320px; width: 320px; }

.mp-tiles__item-link {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius-md);
  background: var(--cy-surface);
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.mp-tiles__item-link:hover { border-color: var(--cy-border-strong); box-shadow: var(--cy-shadow-xs); }

.mp-tiles__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mp-tiles__name { font-size: 14px; font-weight: 700; color: var(--cy-text); }
.mp-tiles__meta { font-size: 12px; color: var(--cy-muted-2); }

@keyframes mp-tiles-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------- the dense product rows */
.mp-dense { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--cy-border); border-radius: var(--cy-radius-md); background: var(--cy-surface); overflow: hidden; }

.mp-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cy-border);
}
.mp-row:last-child { border-bottom: 0; }
.mp-row:hover { background: var(--cy-surface-2); }

.mp-row__art { display: block; width: 84px; }
.mp-row__art .mp-thumb { border-radius: var(--cy-radius-sm); }

.mp-row__body { min-width: 0; }
.mp-row__title { margin: 0 0 4px; font-size: 14px; line-height: 1.35; }
.mp-row__title a { color: var(--cy-text); text-decoration: none; }
.mp-row__title a:hover { text-decoration: underline; }
.mp-row__meta { margin: 4px 0 0; font-size: 12px; color: var(--cy-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* The store badge. `.mp-badge` is kept as a standalone class (its own element,
   never merged with another class name) because the marketplace specs select it. */
.mp-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cy-surface-3, #eef1f1);
  color: var(--cy-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.mp-row__price { text-align: right; white-space: nowrap; }
.mp-row__price .cyc-price { font-size: 15px; font-weight: 700; color: var(--cy-text); }

/* ----------------------------------------------------------------- breakpoints */
@media (max-width: 900px) {
  .mp-carousel__slide { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .mp-carousel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-carousel__title { font-size: 20px; }
  .mp-tiles__item { flex-basis: 240px; width: 240px; }
}

@media (max-width: 560px) {
  .mp-carousel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-row { grid-template-columns: 64px minmax(0, 1fr); }
  .mp-row__art { width: 64px; }
  .mp-row__price { grid-column: 2; text-align: left; }
  .mp-tiles__item { flex-basis: 78vw; width: 78vw; }
}

/* Reduced motion: no automatic movement anywhere, and every band becomes an
   ordinary horizontally scrollable strip so nothing is unreachable. */
@media (prefers-reduced-motion: reduce) {
  .mp-carousel__track,
  .mp-tiles__track { animation: none !important; transform: none !important; }
  .mp-carousel__viewport,
  .mp-tiles__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
  .mp-carousel__slide { scroll-snap-align: start; }
  .mp-tiles__item { scroll-snap-align: start; }
}