/* JustDance 페이지 전용. index.css 를 먼저 불러온 뒤 얹어서 쓴다. */

/* 병합 결과는 2x2 격자라 원본과 같은 16:9다.
   로딩 전 레이아웃이 튀지 않도록 비율을 미리 잡아둔다. */
.container__image img#jdPhoto {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background-color: #000;
}

/* 격자 경계가 보이도록 살짝 어두운 배경 위에 올린다. */
.container__image {
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* 갱신 시각 표시는 본문보다 덜 강조한다. */
#jdStatus {
  font-size: 14px;
  opacity: 0.75;
}

/* 메인 페이지에서 JustDance로 넘어가는 링크 */
.button--jd {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: none;
  padding: 12px 26px;
}

.button--jd:hover {
  background-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 버튼이 여러 개라 좁은 화면에서 줄바꿈되도록 여백을 준다. */
.container .button,
.container a.button {
  margin: 6px 4px 0 4px;
  text-decoration: none;
}