/* ============================================================
   写真のめくり（段階5.7 / 要件書6-1・6-2 v2.9。公開ページと管理画面のカードで同じもの）
   ============================================================
   * 写真の帯を overflow-x: auto と scroll-snap で横に並べる。指で横に送れば1枚ずつ止まる。
     JavaScript が無くても、帯を送れば全部の写真にたどり着ける（矢印は JavaScript があるときだけ出る）。
   * 横に動くのは写真の帯の中だけ。帯の幅は親（カード）に合わせるので、幅 360px でもページ全体に
     横スクロールは出ない（min-width: 0 と width: 100% で、中の写真に押し広げられないようにしている）。
   * 「2 / 4」は写真ごとに書いてある（1枚ずつ正しい番号。JavaScript が無くても合う）。
     1枚だけの商品は、番号も矢印も出さない（HTML に書かない。slider.js も矢印を出さない）。
   * 色はここでは決めすぎない（公開ページと管理画面の CSS が、枠の大きさ・背景を決める）。
   ============================================================ */

.kk-slider {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
}

.kk-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;      /* 端まで送ったとき、ページ全体の「戻る」などに伝えない */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.kk-slider__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;            /* 勢いよく送っても1枚ずつ止まる */
  display: flex;
  flex-direction: column;
}

/* 「2 / 4」。写真の右上に小さく重ねる */
.kk-slider__no {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #ffffff;
  font-size: .8rem;
  line-height: 1.6;
  pointer-events: none;
}

/* 左右の矢印（JavaScript があるときだけ出る。PC でもめくれるように） */
.kk-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #1f2328;
  font-size: 1.4rem;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.kk-slider__btn--prev { left: 6px; }
.kk-slider__btn--next { right: 6px; }
.kk-slider__btn:disabled { opacity: .35; cursor: default; }
.kk-slider__btn:focus-visible { outline: 3px solid #f0b429; outline-offset: 2px; }