/* 명세: Hub(푸터·패널)와 나의 미식우주의 설치 링크에 동일한 외곽 크기,
   아이콘 영역, 두 줄 문구를 적용합니다. 좁은 화면에서는 버튼 단위로 줄바꿈합니다. */
:is(.app-store-badges, .panel-app-store-badges, .universe-app-store-badges) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

:is(.app-store-badges, .panel-app-store-badges, .universe-app-store-badges) > .store-install-link {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 156px;
  width: 156px;
  height: 46px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 5px 12px;
  border: 1px solid #888;
  border-radius: 9px;
  background: #050505;
  color: #fff;
  text-decoration: none;
  font-family: Arial, sans-serif;
  transition: filter .2s, transform .2s;
}

/* 아이콘 글리프 폭이 달라도 문구 시작점이 같도록 고정 폭 영역을 사용합니다. */
.store-install-link > .fa-brands {
  flex: 0 0 28px;
  width: 28px;
  font-size: 28px;
  text-align: center;
}

:is(.app-store-badges, .panel-app-store-badges, .universe-app-store-badges) .store-install-link > span {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.store-install-link small {
  margin-bottom: 3px;
  color: #ccc;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
}

.store-install-link:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

.store-install-link:focus-visible {
  outline: 2px solid #b69aff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :is(.app-store-badges, .panel-app-store-badges, .universe-app-store-badges) > .store-install-link {
    transition: none;
    transform: none;
  }
}