/* 순서 정하기 */
.od-layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .od-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.od-stage {
  background: var(--surface-2); border-radius: var(--radius-lg); padding: 14px; min-height: 120px;
}
.od-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.od-live { margin: 0; text-align: center; font-weight: 800; font-size: 16px; color: var(--text-2); min-height: 1.5em; }
.od-input.is-locked { opacity: .55; pointer-events: none; }

.od-card { --c: var(--primary); --ct: #fff; position: relative; height: 54px; perspective: 700px; }
.od-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.3, 1.3, .5, 1);
}
.od-face {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 8px;
  border-radius: 14px; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden;
}
.od-front {
  background: var(--surface); border: 2px solid color-mix(in srgb, var(--c) 55%, var(--border)); box-shadow: var(--shadow-sm);
}
.od-num {
  flex: none; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  background: var(--c); color: var(--ct); font-family: var(--font-num); font-weight: 900; font-size: 17px;
}
.od-name { font-weight: 800; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-back {
  transform: rotateY(180deg); justify-content: center; color: #fff; border: 2px solid #e8431f;
  background: repeating-linear-gradient(45deg, #ff5a36 0 9px, #ff7a5c 9px 18px);
  box-shadow: var(--shadow-sm);
}
.od-back-num {
  min-width: 38px; height: 34px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .22); font-family: var(--font-num); font-weight: 900; font-size: 18px;
}
.od-card.is-down .od-inner { transform: rotateY(180deg); }
.od-card.is-next .od-back { animation: od-throb .5s ease-in-out infinite; }
.od-card.is-shown.is-first .od-front {
  border-color: #f5b700; background: linear-gradient(135deg, color-mix(in srgb, #ffd66b 30%, var(--surface)), var(--surface) 70%);
}
.od-card.is-shown.is-first .od-num { background: #f5b700; color: #3d2d00; }
@keyframes od-throb {
  0%, 100% { filter: brightness(1); box-shadow: var(--shadow-sm); }
  50% { filter: brightness(1.15); box-shadow: 0 0 0 4px rgba(255, 90, 54, .3); }
}
@media (max-width: 520px) {
  .od-stage { padding: 10px; }
  .od-board { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; }
  .od-card { height: 50px; }
  .od-num { min-width: 30px; height: 30px; font-size: 15px; }
  .od-name { font-size: 15px; }
}