@charset "utf-8";

/* OverflowCarousel CSS 変数 デフォルト */
:root{
  --ofc-items-visible: 3;        /* 見える個数 */
  --ofc-peek: 60px;              /* 左右 peek 幅（ピクセル） */
  --ofc-gap: 5px;                /* item 間隔 */
  --ofc-aspect-ratio: 1.78;      /* item のアスペクト比（16:9） */
}

/* Main carousel layout */
.ofcarousel{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Viewport with scroll snap configuration */
.ofc-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  width:100%;
  /* scroll snap 設定 - mandatory で必ずスナップさせる */
  scroll-snap-type:x mandatory;
  /* スナップ位置を peek を含めて計算 */
  scroll-padding-left: var(--ofc-peek);
  scroll-padding-right: var(--ofc-peek);
  /* Hide scrollbar */
  scrollbar-width:none;
}
.ofc-viewport::-webkit-scrollbar {
  display:none;
}

/* Scroll snap container - track inside viewport */
.ofc-track{
  display:flex;
  gap:var(--ofc-gap);
  -webkit-overflow-scrolling:touch;
  /* peek 空間を罫で確保 */
  padding-left: var(--ofc-peek);
  padding-right: var(--ofc-peek);
}

/* When peek is 0, remove padding */
.ofcarousel--no-peek .ofc-track {
  padding-left: 0;
  padding-right: 0;
}

.ofcarousel--no-peek .ofc-viewport {
  scroll-padding-left: 0;
  scroll-padding-right: 0;
}

/* Scroll snap item - each carousel slide */
.ofc-slide{
  flex:0 0 calc((100% - (var(--ofc-items-visible) - 1) * var(--ofc-gap)) / var(--ofc-items-visible));
  aspect-ratio:var(--ofc-aspect-ratio);
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* When aspectAuto is enabled, remove aspect-ratio and use content height */
.ofcarousel--aspect-auto .ofc-slide {
  aspect-ratio: auto;
}

/* Navigation container */
.ofc-navs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  width:100%;
}

/* Navigation buttons */
.ofc-nav{
  padding:4px 8px;
  cursor:pointer;
  flex-shrink:0;
  font-size:14px;
  border:1px solid currentColor;
  background:transparent;
}
.ofc-nav:hover{
  opacity:0.7;
}
.ofc-nav:active{
  transform:scale(0.98);
}

/* Dots indicator */
.ofc-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.ofc-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid currentColor;
  background:transparent;
  padding:0;
  cursor:pointer;
  opacity:0.5;
}
.ofc-dot.is-active{
  opacity:1;
  background:currentColor;
}
.ofc-dot:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

@media (max-width:640px){
  :root{--ofc-peek:24px}
}