/* ── 가로 줄 ────────────────────────────────────────────────────────
   넷플릭스의 그 줄. 옆 카드가 살짝 걸쳐 보여서 «더 있다» 를 알린다.

   🔴 끝을 화면 폭에 딱 맞춰 자르지 않는다. 딱 맞으면 사람은 그것이
      전부인 줄 알고 끌어 볼 생각을 하지 않는다.

   🔴 색을 새로 짓지 않는다. 역할 토큰만 쓴다 —
      밝은 화면·어두운 화면 양쪽에서 저절로 뒤집히게 하는 길은 이것뿐이다. */

.gl-rail-wrap { position: relative; }

.gl-rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;

  /* 붙는 자리를 카드 왼쪽에 맞춘다. 안쪽 여백이 있으면 그만큼 빼 준다 —
     안 그러면 첫 카드가 늘 화면 밖으로 반쯤 밀려 붙는다. */
  scroll-padding-left: 0;

  /* 막대는 감춘다. 끌어서 움직이는 것이라 막대가 있으면
     «여기를 잡아야 하나» 하고 헷갈린다. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gl-rail::-webkit-scrollbar { display: none; }
.gl-rail.is-drag { cursor: grabbing; scroll-behavior: auto; }

/* 끄는 동안에는 카드 안의 글자가 잡혀 끌리지 않게 한다.
   글자가 잡히면 끌기가 «글 선택» 으로 바뀌어 줄이 안 움직인다. */
.gl-rail.is-drag, .gl-rail.is-drag * { user-select: none; }
.gl-rail img { -webkit-user-drag: none; user-drag: none; }

.gl-rail-track {
  display: flex;
  gap: 20px;
  padding-bottom: 4px;   /* 그림자·테두리가 잘리지 않게 */
}

.gl-rail-track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
  /* 한 화면에 3.2장. 0.2 가 «더 있다» 를 알리는 몫이다. */
  width: calc((100% - 40px) / 3.2);
}

/* ── 좌우 단추 ──────────────────────────────────────────────────────
   끌 수 없는 분에게도 다음 것을 볼 길이 있어야 한다.
   평소에는 옅게 두고, 줄에 손이 오면 또렷해진다. */
.gl-rail-btn {
  position: absolute; top: 0; bottom: 34px;
  width: 52px; display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  color: var(--fg-strong);
  background: transparent;
  opacity: 0; transition: opacity .2s ease;
}
.gl-rail-wrap:hover .gl-rail-btn,
.gl-rail-btn:focus-visible { opacity: 1; }
.gl-rail-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.gl-rail-prev { left: -14px; }
.gl-rail-next { right: -14px; }

.gl-rail-btn span {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgb(0 0 0 / .18);
}
.gl-rail-btn svg { width: 20px; height: 20px; }

/* 끝에 닿은 쪽 단추는 지운다. 눌러도 아무 일 없는 단추는 «고장» 으로 읽힌다. */
.gl-rail.at-start ~ .gl-rail-prev,
.gl-rail.at-end   ~ .gl-rail-next,
.gl-rail.no-move  ~ .gl-rail-btn { opacity: 0 !important; pointer-events: none; }

/* ── 좁은 화면 ──────────────────────────────────────────────────────
   휴대폰에서는 손가락으로 넘긴다. 단추는 자리만 먹으므로 치운다.
   한 장 반이 보이게 두어 «옆에 더 있다» 를 남긴다. */
@media (max-width: 900px) {
  .gl-rail-track > * { width: calc((100% - 20px) / 2.15); }
}
@media (max-width: 640px) {
  .gl-rail-track { gap: 14px; }
  .gl-rail-track > * { width: 78%; }
  .gl-rail-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gl-rail { scroll-behavior: auto; }
  .gl-rail-btn { transition: none; }
}