/* ======================================================================
   marquee-1plus1.css
   1+1 (/category/all/) 전용 히어로 배경 = 컨셉컷 "banner2" 30장을
   가로로 길게 이어 붙여 천천히 무한 가로 스크롤(마퀴)하는 "사진 띠".

   - crossfade(겹쳐 페이드) 아님. 가로로 흐르는 띠.
   - 트랙을 2배 복제 → translateX 0 → -50% 무한 루프(끊김 없음).
   - 좌/우가 밝아지는 오버레이로 "1+1" 큰 제목 또렷하게.
   - 톤은 다른 카테고리 히어로(#f7f6f3 warm)와 동일.
   js/marquee-1plus1.js 가 .category-hero[data-marquee-1plus1] 를 채운다.
   ====================================================================== */

/* 마퀴가 붙는 히어로 — 텍스트는 배경 위에 떠야 함 */
.category-hero.has-marquee-1plus1 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg-warm, #f7f6f3);
  text-align: center;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 사진 띠 뷰포트 (히어로 전체를 덮음) */
.htk-marquee {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 가로로 흐르는 트랙 — 사진들이 한 줄로 늘어섬 */
.htk-marquee__track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  /* 천천히/느긋하게 — 90초에 트랙(30장×2)의 절반(=원본 30장)을 흐름 */
  animation: htk-marquee-scroll 90s linear infinite;
}

/* 개별 세로 모델 컷 */
.htk-marquee__item {
  flex: 0 0 auto;
  height: 100%;
  /* 세로 모델컷이 가로로 줄지어 늘어섬 — 가로폭은 높이에 비례 */
  width: clamp(200px, 22vw, 300px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 트랙을 2배 복제했으므로 -50% 이동 = 원본 한 바퀴, 이음새 없이 반복 */
@keyframes htk-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 가독 오버레이 — 가운데가 가장 밝아 "1+1" 텍스트 또렷 (warm 톤) */
.htk-marquee__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(247, 246, 243, 0.86) 0%,
      rgba(247, 246, 243, 0.42) 30%,
      rgba(247, 246, 243, 0.42) 70%,
      rgba(247, 246, 243, 0.86) 100%
    ),
    linear-gradient(
      180deg,
      rgba(247, 246, 243, 0.55) 0%,
      rgba(247, 246, 243, 0.18) 45%,
      rgba(247, 246, 243, 0.55) 100%
    );
}

/* 히어로 텍스트는 사진 띠/오버레이 위로 */
.category-hero.has-marquee-1plus1 .category-hero__eyebrow,
.category-hero.has-marquee-1plus1 .category-hero__title,
.category-hero.has-marquee-1plus1 .category-hero__desc {
  position: relative;
  z-index: 2;
}

/* 타이포 — 다른 카테고리 히어로와 동일 톤(가늘게 + 넓은 자간) */
.category-hero.has-marquee-1plus1 .category-hero__eyebrow {
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #6b6b6b);
  margin-bottom: 14px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.category-hero.has-marquee-1plus1 .category-hero__title {
  font-family: var(--font-headline, "Inter", sans-serif);
  font-weight: 300;
  font-size: clamp(44px, 8vw, 80px);
  letter-spacing: 0.16em;
  line-height: 1.04;
  color: var(--color-text-primary, #1a1a1a);
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.55);
  margin: 0;
}

.category-hero.has-marquee-1plus1 .category-hero__desc {
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary, #4a4a4a);
  margin-top: 16px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

/* 모바일 — 히어로 높이에 맞춰 띠가 가로로 흐름 */
@media (max-width: 768px) {
  .category-hero.has-marquee-1plus1 {
    min-height: 340px;
  }
  .htk-marquee__item {
    width: clamp(150px, 42vw, 220px);
  }
  .category-hero.has-marquee-1plus1 .category-hero__title {
    font-size: clamp(40px, 13vw, 60px);
    letter-spacing: 0.12em;
  }
  .category-hero.has-marquee-1plus1 .category-hero__eyebrow {
    letter-spacing: 0.34em;
  }
}

/* 모션 최소화 선호 사용자: 흐름 멈춤(첫 화면 고정) */
@media (prefers-reduced-motion: reduce) {
  .htk-marquee__track {
    animation: none;
  }
}