/* 카드 레일 «틀» — 좌우 화살표와 그 자리를 비우는 셸. (D-356에서 home.css에서 떼어 왔다)
 *
 * 🔴 **왜 옮겼나.** 이 규칙은 `paged-rail.js`가 만드는 마크업(.rail-shell·.rail-arrow)의 짝인데
 *    home.css 안에 있었다. 그래서 홈이 아닌 지면에 레일을 붙이려면 **home.css를 통째로
 *    링크**해야 했고(그 파일에는 홈 전용 규칙이 수백 줄 있다), 안 링크하면 화살표가 스타일
 *    없이 카드 위에 겹쳤다. 스크립트와 짝인 규칙은 스크립트와 함께 다녀야 한다.
 *
 * ⚠ `data-paged-rail`을 붙이는 지면은 **이 파일과 js/paged-rail.js를 함께** 링크해라.
 *   둘 중 하나만 실으면: CSS만 → 아무 일도 안 일어남 / JS만 → 화살표가 카드를 덮는다.
 * ⚠ `--shell-pad`(페이지 좌우 여백)는 전역 셸이 준다 — 이 파일은 그것을 읽기만 한다.
 */

/* ── 카드 레일 좌우 화살표 (2026-08-09 사용자 지시 · 참고 지면: 여행 플랫폼 캐러셀) ──────
   홈의 네 지면('프리미엄 세무사'·'지금 상담 가능한 세무사'·'세무 Q&A'·'세무시선')이
   **같은 화살표 하나**를 쓴다. 버튼 자체는 paged-rail.js가 만든다 — 마크업에 미리 넣어 두면
   스크립트가 죽었을 때 눌러도 아무 일 없는 장식이 남는다(배너 캐러셀 banner.js와 같은 원칙).
   `.rail-shell`도 그 스크립트가 레일을 감싸며 만든다 — 레일 안에 화살표를 두면 잘리기
   때문이다(.ad-rail·.tp-rail은 레일 자신이 overflow:hidden이고, .qna-rail·.sisun-rail은
   트랙이 overflow-x:auto라 어느 쪽이든 카드 줄 밖으로 나간 부분이 남지 않는다).

   🔴 **화살표는 카드 클릭을 가리지 않아야 한다**(사용자 지시). 예전엔 버튼을 카드 줄 밖으로
      `min(…, --shell-pad)`만큼만 밀고 "넓은 화면에서는 카드 밖에 완전히 선다"고 적어 뒀는데,
      **실제 폭에서 거짓이었다**: 1280px에서 --shell-pad는 28.16px뿐이라 40px 버튼이 카드 줄
      위로 19.84px 겹쳤고(실측), 그 띠에서는 카드 대신 화살표가 눌렸다.
      지금은 참고 지면과 같은 방식으로 **화살표가 설 자리를 레일 스스로 비운다**:
        · 셸이 좌우로 `--ra-need`(=버튼 폭 + 틈 = 46px)만큼 안쪽 여백을 갖는다 → 카드 줄이
          그만큼 좁아지고, 그 빈자리에 버튼이 선다. **어느 폭에서도 카드 위에 겹치지 않는다.**
        · 다 안쪽에서 뺏지는 않는다. 페이지 좌우 여백(--shell-pad) 중 가장자리 몫(--ra-edge)을
          남긴 나머지까지는 셸이 음수 마진으로 **바깥으로** 나가 그만큼을 되돌려 준다
          (--ra-out). 그래서 화면이 넓을수록 카드 줄이 제목 줄에 가까이 붙는다 — 실측
          (Chrome, 이 지면): 800px → 제목 줄보다 36.41px 안쪽 · 1280px → 25.84px ·
          1920px → 11.77px · 2560px → **0px(완전히 일치, 버튼이 카드 줄 밖에 온전히 선다)**.
          경계는 --shell-pad ≥ 54px, 즉 2.2vw 기준 뷰포트 약 2455px이다.
          바깥으로 나가는 양은 --shell-pad로 묶여 있어 페이지가 가로로 스크롤되지 않는다
          (실측: 800·1280·1920·2560px 모두 documentElement.scrollWidth == 뷰포트 폭).
   ⚠ **끝이 없다**(2026-08-09 사용자 지시) — 배너 캐러셀과 같은 방식으로 앞쪽 카드의 복제본을
     끝에 이어 붙여 무한히 순환한다(paged-rail.js). 그래서 순환 중에는 화살표가 꺼지지 않는다.
     **비활성(disabled)이 남는 경우는 하나뿐이다**: 카드가 한 화면 안에 다 들어와 순환 자체를
     만들지 않을 때 — 그때는 양쪽이 꺼져 아래 규칙이 화살표를 통째로 감춘다.
     disabled 속성이라 탭 순서에서도 빠진다 — 누를 수 없는 버튼에 초점이 가지 않는다.
   ⚠ 터치 지면(≤768px)에서는 아예 그리지 않는다 — 스와이프가 이미 있고, 좁은 화면에서
     40px 버튼 두 개는 카드를 덮는다. 가로 스크롤은 CSS만으로 늘 살아 있다.
     그때는 비워 둔 자리도 함께 걷는다(아래 미디어쿼리) — 안 그러면 아무도 서지 않는
     46px짜리 빈 여백만 남아 좁은 화면에서 카드가 괜히 좁아진다. */
.rail-shell {
  position: relative;
  /* 🔴 치수는 **셸에** 둔다. 커스텀 속성은 아래로만 흐르므로 .rail-arrow에 두면
     부모인 셸이 읽지 못해 여백 계산(padding-inline)이 통째로 무효가 된다. */
  --ra-size: 40px;
  /* 버튼과 첫 카드 사이 틈. */
  --ra-gap: 6px;
  /* 화면(또는 사이드바) 가장자리에 붙지 않게 남겨 두는 최소 여백. 이만큼은 항상 비운다 —
     실측(1280px, --shell-pad 28.16px)에서 이 값이 없으면 버튼이 창 오른쪽 끝에 딱 붙었다. */
  --ra-edge: 8px;
  /* 버튼 하나가 카드 줄 밖에 서는 데 필요한 폭. */
  --ra-need: calc(var(--ra-size) + var(--ra-gap));
  /* 그중 페이지 좌우 여백에서 빌려 올 수 있는 몫(나머지는 카드 줄에서 낸다). */
  --ra-out: max(0px, min(var(--ra-need), calc(var(--shell-pad) - var(--ra-edge))));
  margin-inline: calc(var(--ra-out) * -1);
  padding-inline: var(--ra-need);
}
.rail-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: var(--ra-size); height: var(--ra-size); padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-primary); cursor: pointer;
  box-shadow: 0 2px 10px rgba(17, 31, 40, .12);
  transition: box-shadow .15s ease, opacity .15s ease;
}
.rail-arrow svg { width: 18px; height: 18px; display: block; }
.rail-arrow:hover { box-shadow: 0 4px 16px rgba(17, 31, 40, .2); }
.rail-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 넘길 것이 없으면(= 카드가 한 화면 안, 순환 없음) 사라진다 — 자리는 유지되지만 보이지도,
   눌리지도 않는다. 순환 중에는 여기 걸릴 일이 없다(위 설명). */
.rail-arrow:disabled { opacity: 0; visibility: hidden; }
/* 셸의 패딩 상자 끝 = 비워 둔 자리의 바깥 끝이다(절대 위치의 기준이 패딩 상자다).
   그래서 0이면 버튼 오른쪽 끝과 첫 카드 사이가 정확히 --ra-gap이 된다. */
.rail-arrow-prev { left: 0; }
.rail-arrow-next { right: 0; }
@media (max-width: 768px) {
  .rail-arrow { display: none; }
  /* 버튼이 없으니 비워 둔 자리도 없앤다 — 카드 줄이 본문 폭을 그대로 쓴다. */
  .rail-shell { margin-inline: 0; padding-inline: 0; }
}
/* 모션을 줄이겠다고 한 사용자에게는 그림자·투명도 전환도 없앤다(자동 넘김은 JS가 끈다). */
@media (prefers-reduced-motion: reduce) {
  .rail-arrow { transition: none; }
}