/* 넘치는 줄 꾸미기 — 문서 41 구현 순서 24 · 25 (2026-10-28) · 사이트 설정 site.motion.sshadow · cmark

   가로로 넘치는 것(가로 줄 gl-rail · 표 상자)에 «옆에 더 있다» 를 알린다. 화면마다가 아니라 사이트에 한 번 고른다.
   🔴 스크롤을 가로채지 않는다 — 그림자는 «지금 어디까지 왔나» 만 읽는다(scroll-timeline · 끝 표시 클래스).
   🔴 움직이는 것은 opacity 하나 · 색은 역할 토큰(--fg · --line · --accent)만. 누를 수 없다(pointer-events: none).

   ── 24. 스크롤 그림자 (sshadow · :root[data-gl-sshadow="on"]) ─────────────────────────────────
   가로 줄 — 감싸는 상자(.gl-rail-wrap)의 ::before(왼쪽) · ::after(오른쪽)가 넘치는 쪽 가장자리에 그림자를 깐다.
     · 스크롤 연동이 되는 브라우저 — 줄의 scroll-timeline 이 그림자 진하기(opacity)를 정한다(맨 앞이면 왼쪽 없음 · 끝이면 오른쪽 없음)
     · 안 되는 브라우저 — gl-rail.js 가 다는 끝 표시(at-start · at-end · no-move)로 같은 모양
     · 스크립트도 없으면 — 오른쪽 그림자만 정지(«더 있다»). 넘칠 것이 없는 줄은 스크립트가 no-move 로 지운다
   표 상자(.gl-docs-table-wrap · .gl-pcc-tablewrap · .gl-bill-tablewrap) — 상자 자신이 스크롤하므로 ::before · ::after 를
   양 끝에 붙는(sticky) 띠로 세우고 그 상자의 scroll(nearest) 타임라인으로 진하기를 정한다(넘칠 것이 없으면 타임라인이 서지 않아 그림자도 없다). 스크롤 연동이 안 되는 브라우저에서는 표를 그대로 둔다(손해 없음).

   ── 25. 캐러셀 점 · 버튼 (cmark · :root[data-gl-cmark="on"]) ──────────────────────────────────
   ::scroll-marker(카드마다 점) · ::scroll-button(이전 · 다음)을 아는 브라우저(Chrome · Edge 135+)에서만 켠다(@supports).
     · 점은 지금 보이는 카드를 따라가고(:target-current) 누르면 그 카드로 간다 — 키보드로도 고른다(브라우저가 탭 목록으로 다룬다)
     · 🔴 두 벌이 되지 않게 — 브라우저 버튼을 켜면 스크립트 버튼(.gl-rail-btn)을 숨긴다. 모르는 브라우저는 지금 버튼 그대로
     · 움직임 줄이기 — 점이 커지는 움직임을 끈다(넘김은 gl-rail.css 가 이미 즉시로 둔다) */

/* ── 24. 스크롤 그림자 — 가로 줄 ─────────────────────────────────────── */
:root { --gl-sshadow-w: clamp(20px, 3.2vw, 40px); --gl-sshadow-c: color-mix(in srgb, var(--fg) 18%, transparent); }
:root[data-gl-sshadow="on"] .gl-rail-wrap { timeline-scope: --gl-sshadow-rail; }
:root[data-gl-sshadow="on"] .gl-rail-wrap::before,
:root[data-gl-sshadow="on"] .gl-rail-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 4px; width: var(--gl-sshadow-w); z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
:root[data-gl-sshadow="on"] .gl-rail-wrap::before { left: 0; background: radial-gradient(farthest-side at 0 50%, var(--gl-sshadow-c), transparent); }
:root[data-gl-sshadow="on"] .gl-rail-wrap::after { right: 0; background: radial-gradient(farthest-side at 100% 50%, var(--gl-sshadow-c), transparent); opacity: 1; }
/* 스크롤 연동이 안 되는 브라우저 — gl-rail.js 의 끝 표시로 */
:root[data-gl-sshadow="on"] .gl-rail-wrap:has(> .gl-rail[data-gl-rail-ready]:not(.at-start))::before { opacity: 1; }
:root[data-gl-sshadow="on"] .gl-rail-wrap:has(> .gl-rail.at-end)::after,
:root[data-gl-sshadow="on"] .gl-rail-wrap:has(> .gl-rail.no-move)::before,
:root[data-gl-sshadow="on"] .gl-rail-wrap:has(> .gl-rail.no-move)::after { opacity: 0; }
@supports (animation-timeline: scroll()) and (timeline-scope: none) {
  :root[data-gl-sshadow="on"] .gl-rail-wrap > .gl-rail { scroll-timeline: --gl-sshadow-rail inline; }
  :root[data-gl-sshadow="on"] .gl-rail-wrap::before { animation: gl-sshadow-start linear both; animation-timeline: --gl-sshadow-rail; transition: none; }
  :root[data-gl-sshadow="on"] .gl-rail-wrap::after { animation: gl-sshadow-end linear both; animation-timeline: --gl-sshadow-rail; transition: none; }
}
@keyframes gl-sshadow-start { 0% { opacity: 0; } 6% { opacity: 1; } 100% { opacity: 1; } }
@keyframes gl-sshadow-end { 0% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }

/* ── 24. 스크롤 그림자 — 표 상자 (스크롤 연동이 되는 브라우저만) ─────────── */
@supports (animation-timeline: scroll()) {
  :root[data-gl-sshadow="on"] :is(.gl-docs-table-wrap, .gl-pcc-tablewrap, .gl-bill-tablewrap) { display: flex; align-items: stretch; }
  :root[data-gl-sshadow="on"] :is(.gl-docs-table-wrap, .gl-pcc-tablewrap, .gl-bill-tablewrap) > table { flex: 1 0 auto; min-width: 100%; }
  :root[data-gl-sshadow="on"] :is(.gl-docs-table-wrap, .gl-pcc-tablewrap, .gl-bill-tablewrap)::before,
  :root[data-gl-sshadow="on"] :is(.gl-docs-table-wrap, .gl-pcc-tablewrap, .gl-bill-tablewrap)::after {
    content: ""; position: sticky; z-index: 1; flex: 0 0 var(--gl-sshadow-w); pointer-events: none; opacity: 0;
    animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(nearest inline);
  }
  :root[data-gl-sshadow="on"] :is(.gl-docs-table-wrap, .gl-pcc-tablewrap, .gl-bill-tablewrap)::before {
    left: 0; margin-right: calc(-1 * var(--gl-sshadow-w)); order: -1;
    background: radial-gradient(farthest-side at 0 50%, var(--gl-sshadow-c), transparent); animation-name: gl-sshadow-start;
  }
  :root[data-gl-sshadow="on"] :is(.gl-docs-table-wrap, .gl-pcc-tablewrap, .gl-bill-tablewrap)::after {
    right: 0; margin-left: calc(-1 * var(--gl-sshadow-w)); order: 1;
    background: radial-gradient(farthest-side at 100% 50%, var(--gl-sshadow-c), transparent); animation-name: gl-sshadow-end;
  }
}

/* ── 25. 캐러셀 점 · 버튼 — 아는 브라우저만 ─────────────────────────────── */
@supports (scroll-marker-group: after) {
  :root[data-gl-cmark="on"] .gl-rail { scroll-marker-group: after; }
  :root[data-gl-cmark="on"] .gl-rail::scroll-marker-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px 0 2px; }
  :root[data-gl-cmark="on"] .gl-rail-track > *::scroll-marker {
    content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line);
    transition: background-color .2s ease, transform .2s ease;
  }
  :root[data-gl-cmark="on"] .gl-rail-track > *::scroll-marker:target-current { background: var(--accent); transform: scale(1.35); }
  :root[data-gl-cmark="on"] .gl-rail-track > *::scroll-marker:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  /* 🔴 버튼은 한 벌 — 브라우저 버튼을 쓰면 스크립트 버튼을 숨긴다 */
  :root[data-gl-cmark="on"] .gl-rail ~ .gl-rail-btn { display: none; }
  :root[data-gl-cmark="on"] .gl-rail::scroll-button(left),
  :root[data-gl-cmark="on"] .gl-rail::scroll-button(right) {
    position: absolute; top: calc(50% - 40px); z-index: 2; width: 44px; height: 44px; border-radius: 999px;
    display: grid; place-items: center; cursor: pointer; font-size: 22px; line-height: 1;
    color: var(--fg-strong); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft);
    opacity: .9; transition: opacity .2s ease;
  }
  :root[data-gl-cmark="on"] .gl-rail::scroll-button(left) { content: "‹" / "이전"; left: -14px; }
  :root[data-gl-cmark="on"] .gl-rail::scroll-button(right) { content: "›" / "다음"; right: -14px; }
  :root[data-gl-cmark="on"] .gl-rail::scroll-button(*):disabled { opacity: 0; pointer-events: none; }
  :root[data-gl-cmark="on"] .gl-rail::scroll-button(*):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  @media (max-width: 640px) {
    :root[data-gl-cmark="on"] .gl-rail::scroll-button(*) { content: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-gl-sshadow="on"] .gl-rail-wrap::before,
  :root[data-gl-sshadow="on"] .gl-rail-wrap::after { transition: none; }
  :root[data-gl-cmark="on"] .gl-rail-track > *::scroll-marker { transition: none; }
  :root[data-gl-cmark="on"] .gl-rail-track > *::scroll-marker:target-current { transform: none; }
}