/*!
 * ═══════════════════════════════════════════════════════════════════
 * 📦 Satz Blocks — scroll-marquee (v1.0.0) — CSS
 * ═══════════════════════════════════════════════════════════════════
 *
 * FOUC 방지 및 기본 레이아웃 스타일
 * Engine: css
 * Output Combo: B (CSS only)
 * QA: FOUC: pass | Reduce-Motion: pass
 *
 */

/* ─────────────────────────────────────────────────────────────
   FOUC 방지 (필수)
   ───────────────────────────────────────────────────────────── */
[data-satz="scroll-marquee"] {
  contain: paint;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   Row 레이아웃
   ───────────────────────────────────────────────────────────── */
[data-satz="scroll-marquee"] [data-role="row"] {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow: visible;
  /* SVG 짤림 방지 */
}

/* ─────────────────────────────────────────────────────────────
   Inner Wrapper (무한 루프용)
   ───────────────────────────────────────────────────────────── */
[data-satz="scroll-marquee"] [data-role="inner"] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2rem;
  /* 아이템 간격, 필요 시 조정 */
  white-space: nowrap;
  will-change: transform;
}

/* 아이템 기본 스타일 */
[data-satz="scroll-marquee"] [data-role="inner"]>* {
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   접근성: reduce-motion
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-satz="scroll-marquee"] [data-role="inner"] {
    transform: none !important;
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Full-bleed 레이아웃 (화면 양쪽 끝까지)
   ───────────────────────────────────────────────────────────── */
[data-satz="scroll-marquee"].is-full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* ─────────────────────────────────────────────────────────────
   상태 클래스
   ───────────────────────────────────────────────────────────── */
[data-satz="scroll-marquee"].is-animating {
  /* 애니메이션 진행 중 상태 */
}

[data-satz="scroll-marquee"][data-satz-state="ready"] {
  /* 초기화 완료 상태 */
}

/* ─────────────────────────────────────────────────────────────
   인라인 SVG 로고 스타일
   ───────────────────────────────────────────────────────────── */
[data-satz="scroll-marquee"] .marquee-logo {
  display: block;
  flex-shrink: 0;
  /* width, height, color는 Webflow Designer에서 설정 */
}

/* Safari 렌더링 안정화 */
[data-satz="scroll-marquee"] svg.marquee-logo {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}