/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* 가로 스크롤 영역 — macOS는 스크롤 중에만 스크롤바를 보여줘서, 오른쪽에 내용이 더 있다는 걸
   알 수 없다(18개월 배정 그리드처럼 넓은 표). 이 클래스를 붙인 곳은 스크롤바를 항상 띄운다. */
.scroll-x-always {
  /* overflow-x 를 이 클래스가 직접 갖는다. 예전에는 호출부마다 overflow-x-auto 와 짝을
     지어야 했는데, 한쪽만 붙이면 아무 일도 일어나지 않는다 — 실제로 이슈 목록이 스크롤
     컨테이너만 있고 최소폭이 없어 표가 그냥 눌린 적이 있다. 짝을 잊을 수 없게 한 곳에 둔다. */
  overflow-x: auto;

  /* scrollbar-width를 지정하면 WebKit이 ::-webkit-scrollbar 규칙을 무시하고
     오버레이 스크롤바로 되돌린다 — 여기서는 쓰지 않는다 */
  scrollbar-gutter: stable;

  /* 가장자리 그늘 — iOS Safari는 오버레이 스크롤바만 써서 아래 ::-webkit-scrollbar
     규칙이 통째로 적용되지 않는다. 스크롤바가 없는 기기에서도 "옆에 더 있다"를 알려야 한다.
     background-attachment의 local/scroll 조합이라 JS가 필요 없다 — 덮개(local)는 내용과
     함께 움직이고 그늘(scroll)은 상자에 붙어 있어서, 끝에 닿으면 덮개가 그늘을 가린다.
     즉 더 볼 것이 남았을 때만 보인다. 항상 떠 있는 페이드는 끝에서 거짓말을 한다.
     --scroll-fade-bg 는 이 상자 '뒤'의 색이다. 기본은 카드(흰색)이고, 다른 면 위에
     놓인 곳은 호출부에서 덮어쓴다 — 안 맞으면 끝에서 색 띠가 남는다. */
  --scroll-fade-bg: var(--color-card);
  /* 그늘은 잉크에서 파생한다 — 별도 색을 만들면 토큰을 바꿔도 여기만 옛 색으로 남는다 */
  --scroll-fade-ink: color-mix(in srgb, var(--color-foreground) 13%, transparent);
  background-image:
    linear-gradient(to right, var(--scroll-fade-bg), transparent),
    linear-gradient(to left,  var(--scroll-fade-bg), transparent),
    radial-gradient(farthest-side at 0    50%, var(--scroll-fade-ink), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--scroll-fade-ink), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 28px 100%, 28px 100%, 13px 100%, 13px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.scroll-x-always::-webkit-scrollbar {
  -webkit-appearance: none;                    /* macOS 오버레이 스크롤바 해제 */
  height: 10px;
}
.scroll-x-always::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-x-always::-webkit-scrollbar-thumb {
  background: var(--color-border, #E2E8F0);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.scroll-x-always::-webkit-scrollbar-thumb:hover {
  background: var(--color-foreground-subtle, #64748B);
  background-clip: content-box;
}