/* [data-hscroll] 마크업, static/js/hscroll.js와 짝을 이루는 공용 컴포넌트다. */

/* ── wrap ───────────────────────────────────────────────────── */

.hscroll-wrap {
  position: relative;
  overflow: hidden;
  /* 기본은 양쪽 다 흐리게, .at-start/.at-end가 붙으면 그쪽 흐림만 없앤다. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0px, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0px, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.hscroll-wrap.at-start {
  -webkit-mask-image:
    linear-gradient(to right, #000 0px, #000 calc(100% - 40px), transparent 100%);
  mask-image:
    linear-gradient(to right, #000 0px, #000 calc(100% - 40px), transparent 100%);
}

.hscroll-wrap.at-end {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0px, #000 40px, #000 100%);
  mask-image:
    linear-gradient(to right, transparent 0px, #000 40px, #000 100%);
}

.hscroll-wrap.at-start.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ── track ──────────────────────────────────────────────────── */

.hscroll-track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: auto; /* 부드러운/즉시 스크롤 전환은 JS의 scrollBy가 담당한다 */
  gap: 0.625rem;
  /* 스크롤은 되지만 스크롤바만 숨긴다 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.hscroll-track::-webkit-scrollbar {
  display: none;
}

/* ── arrow buttons — float over card edges ──────────────────── */

.hscroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(17, 31, 55, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text);
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* 처음엔 숨김. overflow 측정 후 JS가 visibility를 정한다 */
  visibility: hidden;
}

.hscroll-btn:hover,
.hscroll-btn:focus-visible {
  border-color: var(--border-soft);
  transform: translateY(calc(-50% - 2px)) scale(1.05);
  box-shadow: 0 8px 22px rgba(17, 31, 55, 0.26);
}

.hscroll-prev {
  left: 8px;
}

.hscroll-next {
  right: 8px;
}

/* ── reduced-motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hscroll-btn {
    transition: none;
  }
  .hscroll-btn:hover,
  .hscroll-btn:focus-visible {
    transform: translateY(-50%);
  }
}

/* ── mobile: native swipe + compact translucent overlay arrows ─ */

@media (max-width: 45rem) {
  /* 화살표는 시각적으로 30px 원이지만, 44px 터치 타깃은 보이지 않는 버튼
     박스 자체를 44px로 키우고 그 안의 ::before에 30px 원을 그려서 맞춘다. */
  .hscroll-btn {
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .hscroll-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    opacity: 0.8;
    box-shadow: 0 2px 8px rgba(17, 31, 55, 0.16);
    /* .hscroll-btn 자체가 별도 stacking context라 이 음수 z-index는
       버튼 안의 ‹/› 글자 뒤로만 가고, 바깥 트랙/카드까지 새지 않는다.
       없으면 ::before가 글자를 덮어버린다. */
    z-index: -1;
  }

  /* 버튼의 보이지 않는 박스는 wrap 가장자리에 딱 붙여야(left/right: 0)
     44px 히트 영역 전체가 .hscroll-wrap의 overflow:hidden 안에 들어간다.
     밖으로 삐져나가면 그 부분은 클릭이 안 먹는다. */
  .hscroll-prev {
    left: 0;
  }

  .hscroll-prev::before {
    left: 4px;
  }

  .hscroll-next {
    right: 0;
  }

  .hscroll-next::before {
    right: 4px;
  }

  .hscroll-track {
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .hscroll-wrap {
    -webkit-mask-image: none;
    mask-image: none;
  }
}