@media (hover: hover) and (pointer: fine) {
  .form-field__input:hover,
  .sort-control select:hover {
    background: var(--color-surface-elevated);
  }

  .view-switch a:hover,
  .pagination a:hover,
  .detail-header__back:hover {
    background: var(--color-surface-elevated);
    color: var(--color-text-primary);
  }
}

.product-mark:active,
.product-mark[data-state="active"] {
  color: var(--color-accent-active);
}

.form-field[data-state="hover"] .form-field__input,
.sort-control[data-state="hover"] select {
  background: var(--color-surface-elevated);
}

.form-field[data-state="focus-visible"] .form-field__input,
.sort-control[data-state="focus-visible"] select,
.view-switch a[data-state="focus-visible"],
.pagination a[data-state="focus-visible"] {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.view-switch a:active,
.view-switch a[data-state="active"] {
  background: var(--color-surface-elevated);
  color: var(--color-accent-active);
  transform: scale(0.98);
}

.app-header__link:active,
.app-header__link[data-state="active"],
.frame-rail__item[data-state="active"] {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  transform: scale(0.98);
}

.video-card[data-state="hover"] {
  background: var(--color-surface-strong);
  box-shadow: var(--shadow-rest);
  transform: translateY(-2px);
}

.video-card[data-state="hover"] .media-thumbnail img {
  transform: scale(1.015);
}

.video-card:active,
.video-card[data-state="active"] {
  background: var(--color-surface-strong);
  transform: translateY(0);
}

.video-card:active .media-thumbnail img,
.video-card[data-state="active"] .media-thumbnail img {
  transform: scale(1);
}

.video-card[data-state="focus-visible"] .video-card__link {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.pagination a:active,
.pagination a[data-state="active"],
.detail-header__back:active,
.detail-header__back[data-state="active"] {
  background: var(--color-surface-strong);
  color: var(--color-accent-active);
}

.video-card__title[lang="ko"],
.video-card__channel[lang="ko"],
.detail-header [lang="ko"] {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.detail-header h1[lang="ko"] {
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: keep-all;
}

@media (prefers-reduced-motion: reduce) {
  .view-switch a:active,
  .view-switch a[data-state="active"],
  .app-header__link:active,
  .app-header__link[data-state="active"],
  .frame-rail__item[data-state="active"],
  .video-card[data-state="hover"],
  .video-card[data-state="hover"] .media-thumbnail img {
    transform: none;
  }
}