/* ===========================
   IDLE 대기 화면
   =========================== */

.idle-screen {
  background: #ffffff;
  overflow: hidden;
}

/* 포토카드 공통 */
.idle-card {
  position: absolute;
  width: 54.51%;
  aspect-ratio: 254 / 340;
  z-index: 1;
}
.idle-card-frame {
  width: 100%;
  height: 100%;
  background: #222;
  border-radius: 4.29cqw;
  padding: 2.58cqw;
  box-sizing: border-box;
}
.idle-card-content {
  width: 100%;
  height: 100%;
  border-radius: 2.58cqw;
  overflow: hidden;
  position: relative;
}
.idle-card-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.idle-card-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  border-radius: 4.29cqw 4.29cqw 0 0;
  padding: 1.72cqw 5.15cqw;
  font-weight: 700;
  font-size: 3.43cqw;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.11cqw;
}

/* 카드 배치 wrapper */
.idle-cards-wrapper {
}

/* 카드 흔들림 애니메이션 — 단일 키프레임으로 통합, will-change로 GPU 가속 */
@keyframes sway {
  0%,
  100% {
    transform: var(--sway-from);
  }
  50% {
    transform: var(--sway-to);
  }
}

.idle-card {
  will-change: transform;
  contain: layout style paint;
}

/* 개별 카드 위치 */
.idle-card--baseball {
  left: -1%;
  top: -26%;
  z-index: 2;
  --sway-from: rotate(-25.24deg);
  --sway-to: rotate(-20.24deg);
  animation: sway 3s ease-in-out infinite;
}
.idle-card--pirate {
  left: 71%;
  top: -7%;
  --sway-from: rotate(-39.89deg);
  --sway-to: rotate(-44.89deg);
  animation: sway 3.8s ease-in-out infinite;
}
.idle-card--yearbook {
  left: -31%;
  top: 1%;
  z-index: 3;
  --sway-from: rotate(34.37deg);
  --sway-to: rotate(29.37deg);
  animation: sway 3.4s ease-in-out infinite;
}
.idle-card--soccer {
  left: -28%;
  top: 33%;
  --sway-from: rotate(-32.57deg);
  --sway-to: rotate(-27.57deg);
  animation: sway 4.2s ease-in-out infinite;
}
.idle-card--cyberpunk {
  left: 74%;
  top: 33%;
  --sway-from: rotate(20.19deg);
  --sway-to: rotate(25.19deg);
  animation: sway 3.6s ease-in-out infinite;
}

/* 중앙 타이틀 */
.idle-title-wrap {
  top: 35%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
}
.idle-subtitle {
  font-size: 3.43cqw;
  font-weight: 600;
  color: #222;
  margin: 0 0 0.86cqw;
}
.idle-title {
  font-size: 9.87cqw;
  font-weight: 900;
  color: #222;
  line-height: 8.58cqw;
  margin: 0;
}

/* 시작 버튼 영역 */
.idle-start-wrap {
  top: 78%;
  transform: translateX(-50%);
  z-index: 2;
}
.idle-start-btn {
  width: 52.36cqw;
  background: #222;
  border-radius: 21.46cqw;
  font-size: 5.15cqw;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  padding: 3.43cqw 0;
  border: none;
  cursor: pointer;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.idle-start-hint {
  font-size: 3.43cqw;
  font-weight: 500;
  color: #222;
  margin-top: 2.58cqw;
  animation: blink 2.5s ease-in-out infinite;
}

/* 로그아웃 */
.idle-logout-wrap {
  top: 95%;
  transform: translateX(-50%);
  z-index: 2;
}
.idle-logout-btn {
  font-size: 3.43cqw;
  font-weight: 500;
  color: #d9d9d9;
  background: none;
  border: none;
  cursor: pointer;
}