/* ====================================================================
   viewer.css  —  슬라이드 뷰어의 점과 이전/다음 버튼 (js/ui/slide-viewer.js)

   슬라이드 한 장의 모양은 쓰는 게임이 정한다 (예: css/games/blackjack.css 의 .bj-slide).
   여기서는 모든 뷰어가 같이 쓰는 "점 · 버튼" 만 둔다.
   ==================================================================== */

/* 슬라이드는 hidden 속성으로 숨긴다. 슬라이드 CSS 가 display:flex 를 줘도 숨겨지도록 !important.
   (블랙잭 원본은 이 규칙이 없어서 한 장씩 넘어가지 않고 전부 쌓여 보였다) */
[id$="-viewer"] > [hidden] { display: none !important; }

.svw__dots {                               /* 슬라이드 점: 지금 것은 길게 */
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 10px 0;
}
.svw__dots--flush { margin-top: 0; }       /* 위 간격 없음 */

.svw__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--brand-700);
  opacity: 0.3;
  transition: width 0.2s ease;
}
.svw__dot.is-active { width: 16px; opacity: 1; }

.svw__buttons { display: flex; gap: 8px; margin-bottom: 20px; }
.svw__buttons--tight { margin-bottom: 18px; }

.svw__btn {                                /* 이전: 테두리 버튼 */
  flex: 1;
  padding: 11px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}
.svw__btn--next {                          /* 다음: 채운 버튼 */
  border: none;
  background: var(--brand-700);
  color: var(--paper);
}