/* ---------------------------------------------------------------------------
   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.

   The operator's follow-up (2026-09-28): "두번째 슬라이더 => 바로 위의 박스 사이즈 랑
   동일하게 크기를 맞추고 슬라이더 진행하게 만들어" — the SECOND slider (the category
   strip below the hero) must be the SAME SIZE as the block directly above it and must
   advance by itself. Two changes carry that:

     * ONE SHARED BAND (--mp-band-h): the box above (`.mp-hero`) and the strip
       (`.mp-tiles--marquee`) take the same total height from one variable, and both are
       full-width children of `.mp-main` with the same padding, so the two stack as two
       equal-size blocks. The strip used to be a 2x/4x `.mp-tiles` GRID cell, which made
       its window one grid column wide (344px at 1440, 174px at 390) — a clipped sliver
       next to a 1412px box. It is `display: block` now: the window is the whole band.
     * ONE ADVANCE (mp-tiles-advance): the strip no longer crawls continuously; it holds
       and then steps exactly one category card at a time, with the same cadence as the
       hero's own slider (the shared --mp-slide-step / --mp-slide-count).

   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.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- the shared band
   ONE height for the box above and for the second slider under it.

   `.mp-hero` gets it as a `min-height` (it can never be squashed: if its own content
   ever needs more room, the hero simply grows), and `.mp-tiles--marquee` gets it as an
   exact `height`. The values are the hero's own measured height at the WIDEST point of
   each range — the block above is not redesigned, it is only given that floor — and
   both blocks therefore render at exactly the same height. Measured (headless Chrome,
   2026-09-28): 1440 → 368.1px each, 1024 → 428.1px each, 390 → the strip follows its own
   content (the hero's 1106px at 390 is produced by the featured-category slider stacked
   inside it; see the report).
   ------------------------------------------------------------------------------- */
:root {
  --mp-tile-gap: 12px;
  /* phone: one category card per window, the same width as the box above it */
  --mp-tile-w: 100%;
  --mp-tile-step: calc(var(--mp-tile-w) + var(--mp-tile-gap));
}

@media (min-width: 900px) {
  :root {
    --mp-band-h: 478.4px;          /* hero measured 478.4px at 901px */
    --mp-tile-gap: 14px;
    /* 105px = the box's frame (2 + 2*26) + the card's border (2) + its padding (24)
       + the label lines (21 + 18) + the three gaps (6 + 6 + 6) — chosen so the four
       1:1 photo cells inside the card come out square when the card fills the band. */
    --mp-tile-w: calc(var(--mp-band-h) - 105px);
  }
  /* the block directly above the second slider: never squashed, same band height */
  .mp-hero { min-height: var(--mp-band-h); }
}
@media (min-width: 975px)  { :root { --mp-band-h: 428.1px; } }  /* hero measured 428.1px */
@media (min-width: 1095px) { :root { --mp-band-h: 407.1px; } }  /* hero measured 407.1px */
@media (min-width: 1110px) { :root { --mp-band-h: 389.1px; } }  /* hero measured 389.1px */
@media (min-width: 1230px) { :root { --mp-band-h: 368.1px; } }  /* hero measured 368.1px */
@media (min-width: 1500px) { :root { --mp-band-h: 347.1px; } }  /* hero measured 347.1px */

.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 slider (2nd one)
   The SECOND slider. It is the same block as the box directly above it: the width of
   `.mp-main` (one full-width child, no grid column), the same 22px 20px / 26px 24px
   padding as `.mp-hero`, the same rounded frame, and the same total height
   (`--mp-band-h`, shared with the hero). */
.mp-tiles--marquee {
  display: block;                 /* NOT the `.mp-tiles` 2x/4x category GRID: the
                                     slider window has to be the whole band, not one
                                     grid column (that is what made it 344px wide) */
  position: relative;
  overflow: hidden;
  height: var(--mp-band-h, auto);
  margin: 16px 0 26px;
  padding: 22px 20px;
  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));
}

.mp-tiles__viewport { height: 100%; overflow: hidden; }

.mp-tiles__track {
  display: flex;
  gap: var(--mp-tile-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
  width: 100%;
  will-change: transform;
  animation-name: mp-tiles-advance;
  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-tiles--marquee:hover .mp-tiles__track,
.mp-tiles--marquee:focus-within .mp-tiles__track { animation-play-state: paused; }

/* One card per step: the card's width and the track's gap make the exact step. */
.mp-tiles__item {
  flex: 0 0 var(--mp-tile-w);
  width: var(--mp-tile-w);
  min-width: 0;
  height: 100%;
}

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

/* Four REAL product photographs of that category, 1:1 on their own (the catalogue's
   image rule) and cropped, never squashed, into the card's fixed photo area. */
.mp-tiles__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
}
.mp-tiles__photos .mp-thumb { aspect-ratio: auto; height: 100%; }
.mp-tiles__photos .mp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.mp-tiles__name {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--cy-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-tiles__meta {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cy-muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ten holds and ten steps: the track holds the ten categories TWICE (see the view),
   so stepping past the tenth one lands on its own duplicate — the loop point is
   invisible — and every step really moves exactly one card. */
@keyframes mp-tiles-advance {
  0%,   8%  { transform: translateX(0); }
  10%,  18% { transform: translateX(calc(-1 * var(--mp-tile-step) * 1)); }
  20%,  28% { transform: translateX(calc(-1 * var(--mp-tile-step) * 2)); }
  30%,  38% { transform: translateX(calc(-1 * var(--mp-tile-step) * 3)); }
  40%,  48% { transform: translateX(calc(-1 * var(--mp-tile-step) * 4)); }
  50%,  58% { transform: translateX(calc(-1 * var(--mp-tile-step) * 5)); }
  60%,  68% { transform: translateX(calc(-1 * var(--mp-tile-step) * 6)); }
  70%,  78% { transform: translateX(calc(-1 * var(--mp-tile-step) * 7)); }
  80%,  88% { transform: translateX(calc(-1 * var(--mp-tile-step) * 8)); }
  90%,  98% { transform: translateX(calc(-1 * var(--mp-tile-step) * 9)); }
  100%      { transform: translateX(calc(-1 * var(--mp-tile-step) * 10)); }
}

/* ------------------------------------------------------- the dense product rows
   The row element itself is `.mp-row`; every inner class is `.mp-dense__*` so the
   removed "catalog dump" markup (`mp-row__*`) can never reappear. */
.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-dense__art { display: block; width: 84px; }
.mp-dense__art .mp-thumb { border-radius: var(--cy-radius-sm); }

.mp-dense__body { min-width: 0; }
.mp-dense__title { margin: 0 0 4px; font-size: 14px; line-height: 1.35; }
.mp-dense__title a { color: var(--cy-text); text-decoration: none; }
.mp-dense__title a:hover { text-decoration: underline; }
.mp-dense__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-dense__price { text-align: right; white-space: nowrap; }
.mp-dense__price .cyc-price { font-size: 15px; font-weight: 700; color: var(--cy-text); }

/* ----------------------------------------------------------------- breakpoints */
@media (min-width: 600px) {
  /* the same inner padding as the box above (`.mp-hero`) */
  .mp-tiles--marquee { padding: 26px 24px; }
}

@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; }
}

@media (max-width: 899px) {
  /* Phone / tablet: one category card per window — the same width as the box
     directly above it — and a photo area that stays 1:1 so the band's height does
     not jump while the images load. */
  .mp-tiles__item-link { grid-template-rows: auto auto auto; }
  .mp-tiles__photos { aspect-ratio: 1 / 1; }
}

@media (min-width: 600px) and (max-width: 899px) {
  /* Tablet: two cards per window, so a full-width 1:1 photo area cannot turn the
     band into a screen-and-a-half-tall block. */
  :root { --mp-tile-w: calc(50% - var(--mp-tile-gap) / 2); }
}

@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-dense__art { width: 64px; }
  .mp-dense__price { grid-column: 2; text-align: left; }
}

/* 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; }
}

/* The "Shop by store" cards show three real product photographs at 44px (the size the
   artwork tiles used to be), so the row keeps its rhythm with photos in it. */
.mp-store__thumbs .mp-thumb { width: 44px; height: 44px; border-radius: var(--cy-radius-sm); }