/* 선택 커스텀: 인풋 스핀 제거, 포커스, 배지/버튼 프리셋 등 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

a { text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

.btn { @apply inline-flex items-center justify-center rounded-xl px-4 py-2 font-semibold; }
.btn-primary { @apply bg-indigo-600 text-white hover:bg-indigo-700; }
.btn-soft { @apply bg-gray-100 hover:bg-gray-200; }

.badge { @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs; }
.badge-gray { @apply bg-gray-100 text-gray-700; }
.badge-success { @apply bg-emerald-100 text-emerald-700; }
.badge-danger { @apply bg-rose-100 text-rose-700; }

.home-pick-poster-shell {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.home-pick-item {
  border-bottom: 1px solid transparent;
}

.home-pick-item:hover {
  color: rgba(255, 255, 255, 1);
}

.home-pick-item.is-active {
  color: rgba(255, 255, 255, 1);
  border-bottom-color: rgba(255, 255, 255, 0.9);
}

.home-pick-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.home-pick-item.is-active .home-pick-arrow,
.home-pick-item:hover .home-pick-arrow {
  opacity: 1;
  transform: translateX(0);
}

.home-rank-mode {
  color: #b6becb;
  transition: color 180ms ease;
}

.home-rank-mode:hover,
.home-rank-mode.is-active {
  color: #111827;
}

.home-rank-chip {
  border: 1px solid #d7dce5;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.9rem 1.2rem;
  transition: all 180ms ease;
}

.home-rank-chip:hover {
  border-color: #9aa4b5;
  color: #111827;
}

.home-rank-chip.is-active {
  background: #21242d;
  border-color: #21242d;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.home-rank-period {
  position: relative;
}

.home-rank-period.is-active {
  color: #111827;
  font-weight: 700;
}

.home-rank-period.is-active::before {
  content: "";
  position: absolute;
  left: -0.7rem;
  top: 0.38rem;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: #111827;
}

.home-rank-card-number {
  text-shadow: 0 8px 24px rgba(15, 23, 42, 0.45);
}

.home-rank-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-rank-scroll::-webkit-scrollbar {
  display: none;
}

.home-full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (min-width: 1024px) {
  .home-pick-poster-shell:hover {
    transform: translateY(-6px);
  }
}