/*
 * scroll-arrows.css — PC 가로 줄 좌우 화살표 + 가장자리 흐림 (js/modules/scroll-arrows.js)
 *
 * - 클래스는 scroll-arrows.js 가 마우스 환경 + body.has-wing 일 때만 붙인다.
 *   휴대폰·태블릿에서는 아무 클래스도 붙지 않으므로 이 파일의 규칙이 적용되지 않는다.
 * - 화살표는 body 끝의 .c-hscroll-arrows 레이어에 문서 좌표로 띄운다(대상 줄의 DOM 은 그대로).
 * - 버튼 크기 36px 는 scroll-arrows.js 의 BTN_SIZE 와 같아야 한다.
 */

@property --hs-fade-l {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@property --hs-fade-r {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* 가장자리 흐림: 더 넘길 내용이 있는 쪽만 22px 흐리게 */
.is-hscroll-fade {
  --hs-fade-l: 0px;
  --hs-fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hs-fade-l), #000 calc(100% - var(--hs-fade-r)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--hs-fade-l), #000 calc(100% - var(--hs-fade-r)), transparent 100%);
  transition: --hs-fade-l .2s, --hs-fade-r .2s;
}
.is-hscroll-fade.has-hscroll-before { --hs-fade-l: 22px; }
.is-hscroll-fade.has-hscroll-after  { --hs-fade-r: 22px; }

/* 화살표 레이어: 일반 상품/배지 위, 기획전 고정 탭(9/10)부터 헤더·하단바·윙·딤·시트까지 모두 아래.
   body 끝에 놓이므로 동일 z-index의 앞선 일반 내용보다 위에 그려진다. */
.c-hscroll-arrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 5;
}
.c-hscroll-arrows > .c-hscroll-arrow {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s, visibility 0s linear .15s, background-color .15s, color .15s;
}
.c-hscroll-arrows > .c-hscroll-arrow.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .15s, background-color .15s, color .15s;
}
.c-hscroll-arrows > .c-hscroll-arrow:hover {
  background: #f2f2f2;
  color: #111;
}
.c-hscroll-arrows > .c-hscroll-arrow:active {
  transform: scale(.94);
}
.c-hscroll-arrows > .c-hscroll-arrow .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
}

@media print {
  .c-hscroll-arrows { display: none; }
  .is-hscroll-fade { -webkit-mask-image: none; mask-image: none; }
}