/* 짝 맞추기 */
.mem-info { color: var(--muted); margin: -4px 0 10px; }
.mem-info b { color: var(--pink); font-weight: 400; font-size: 20px; }
.mem-grid { display: grid; gap: 10px; perspective: 900px; }
.mem-grid.g12 { grid-template-columns: repeat(4, 1fr); }
.mem-grid.g16 { grid-template-columns: repeat(4, 1fr); }
.mem-card { border: 0; background: transparent; padding: 0; aspect-ratio: 1 / 1; touch-action: manipulation; }
.mem-in { position: relative; display: block; width: 100%; height: 100%; transition: transform 0.35s; transform-style: preserve-3d; }
.mem-card.up .mem-in, .mem-card.done .mem-in { transform: rotateY(180deg); }
.mem-back, .mem-front { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; box-shadow: var(--shadow); }
.mem-back { background: linear-gradient(135deg, var(--brand), #f2c9a0); font-size: 34px; color: #fff; }
.mem-front { background: #fff; transform: rotateY(180deg); padding: 6px; overflow: hidden; }
.mem-front.is-name { background: #fff8ec; }
.mem-card.done .mem-front { outline: 4px solid var(--green); }
.mem-name { font-size: 17px; line-height: 1.25; word-break: keep-all; }
.mem-sym { font-family: "Times New Roman", Georgia, serif; font-size: 44px; line-height: 1; }
.mem-sym.it { font-style: italic; font-weight: 700; }
.mem-sym.acc { font-size: 52px; }
.mem-sym.word { font-style: italic; font-size: 22px; }
.mem-svg { display: block; width: 100%; }
.mem-svg svg { display: block; width: 100%; height: auto; }

/* 계이름 스피드 */
.spd-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.spd-bar { flex: 1; height: 16px; background: #fff; border-radius: 99px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
.spd-bar div { height: 100%; width: 100%; background: linear-gradient(90deg, #3bceac, #ffd23f); transition: width 0.1s linear; }
.spd-bar div.low { background: var(--red); }
.spd-num { font-size: 18px; white-space: nowrap; }
.spd-num b { font-weight: 400; color: var(--pink); font-size: 22px; }

/* 마디 채우기 */
.clap-ico, .song-ico { font-size: 90px; padding: 18px 0; animation: bob 1.6s ease-in-out infinite; }
.opt-svg { display: block; width: 100%; max-width: 220px; margin: -6px auto -10px; pointer-events: none; }
.opt-svg svg { display: block; width: 100%; height: auto; }
.opt-name { display: block; font-size: 16px; pointer-events: none; }

/* 노래 제목 */
.song-e { font-size: 26px; margin-right: 6px; vertical-align: middle; }

@media (min-width: 700px) {
  .mem-name { font-size: 21px; }
  .mem-sym { font-size: 60px; }
  .mem-sym.word { font-size: 28px; }
  .mem-grid { gap: 14px; }
  .mem-grid.g12 { max-width: 640px; margin: 0 auto; }
  .mem-grid.g16 { max-width: 640px; margin: 0 auto; }
}