/* ══════════════════════════════════════════════════════════════════════════
   가로 스크롤 어포던스 (2026-09-04 신설)

   🔴 왜 있는가 — **폰에서 "더 있다"가 보이지 않았다**(실측).
     · 학습이력 서브필터(360px): 자습 탭 마지막 버튼이 x=402, 숙제 탭이 x=577 로 화면(360) 밖.
       컨테이너가 `overflow-x:auto` 라 **도달은 되지만** 스크롤이 가능하다는 표시가 없었다.
     · 리포트 대상 칩: 폰에서 `nowrap` + `overflow-x:auto` — 연동 학생 수에 비례해 같은 상태가 된다.

   🔴 세그먼트(택1 상태 축)는 **접지 않는다** — 선택 상태 자체가 "지금 무엇을 보고 있는가" 라
      접으면 정보가 사라진다. 2026-08-30 결정(폰에서 세그먼트는 nowrap + 컨테이너 가로 스크롤 —
      줄바꿈하면 다음 행과 겹친다는 실측)도 그대로 유지한다. 그래서 처방은 **접힘이 아니라 어포던스**다.
      값형 필터(select·date)의 처방인 접힘은 `problem-bank-badge-filter.css` 쪽이다.

   구현: 컨테이너 자체에 `mask-image` 로 가장자리를 흐린다.
     · 오버레이 요소를 덧대지 않으므로 **DOM 구조를 안 건드린다**(스크롤 컨테이너 안에 절대배치를
       넣으면 내용과 함께 스크롤돼 가장자리에 머물지 않는다).
     · mask 는 요소의 박스 기준이라 스크롤해도 가장자리에 고정된다.
   상태 클래스는 `student-common.js` 의 `attachScrollHint()` 가 붙인다(실측 기반 — 넘칠 때만).
   ══════════════════════════════════════════════════════════════════════════ */

/* 폰 대역에서만 흐린다 — 대역 정본은 frontend_guide §4.0 (폰 <600px). */
@media screen and (max-width: 599.98px) {
    /* 오른쪽에 더 있다 */
    .scroll-hint.scroll-hint-end {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }
    /* 왼쪽에 더 있다 */
    .scroll-hint.scroll-hint-start {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
        mask-image: linear-gradient(to right, transparent 0, #000 28px);
    }
    /* 양쪽 */
    .scroll-hint.scroll-hint-start.scroll-hint-end {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }
}