/* 공용 초성/알파벳 퀵인덱스 레일 (shared/_alpha_index_rail.html.erb + alpha_index_rail_controller.js).
   ㄱ~ㅎ + A~Z + # 세로 스택. 리스트에 없는 글자는 .is-empty 로 흐림. 색 = 테마 primary(구글 블루).
   기본은 우측 벽 absolute 오버레이 — 소비 화면은 position:relative 부모 안에 렌더. */
.alpha-rail {
  width: 18px;
  padding: 4px 0;
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(calc(-50% + 10px)); /* 위 검색/헤더와 안 겹치게 살짝 아래로 */
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alpha-rail__ch {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-primary, #1a73e8);
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  padding: 0;
  /* 1:1 정사각형 — 호버 배경(:hover)이 가로세로 같은 정사각. 글자는 flex 로 정중앙. */
  width: 16px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.alpha-rail__ch:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary, #1a73e8) 14%, transparent);
}

/* 현재 리스트에 그 글자 그룹이 없어도 — 옅은 파란색 + 클릭 가능(누르면 가장 가까운 그룹으로 점프). */
.alpha-rail__ch.is-empty {
  color: #93c5fd;
}

/* 글자 클릭 시 스크롤 컨테이너 중앙에 뜨는 네모칸 — 잠깐 떴다가 스르륵 fade+scale out (iOS 연락처식).
   alpha_index_rail_controller#_flashLetter 가 body 에 1개 붙이고 .is-show 토글로 애니메이션 재생. */
.alpha-flash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.18);
  color: var(--md-sys-color-primary, #1a73e8);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
}

.alpha-flash.is-show {
  animation: alpha-flash-anim 0.7s ease forwards;
}

@keyframes alpha-flash-anim {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alpha-flash.is-show {
    animation-duration: 0.01s;
  }
}