/*
 * 교실 퀴즈·빙고 교실 화면 (전체 화면, 유초등 대상) — "멜리 꿀벌 교실" (2026-09-28 확정)
 * 관리자 보드 규칙과 별개의 세계. 모든 클래스는 .mc- 접두어, 루트는 .mc
 * 캐릭터 이미지: public/classroom/melly/*.webp (UserCharacter.classroom_image_path)
 */

.mc {
  --sky: #dff3ff; --sky-2: #bfe6ff; --meadow: #c9ecb0; --grass: #8fd16f;
  --honey: #ffc53d; --honey-d: #f0a500; --ink: #24303d; --ink-2: #4b5866; --paper: #ffffff;
  --c1: #ff5d8f; --c2: #2f9bff; --c3: #ffb400; --c4: #22b573;
  --ease: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
}
.mc { font-family: "Pretendard Variable", Pretendard, sans-serif; color: var(--ink); font-feature-settings: "tnum" 1; }
.mc button { font-family: inherit; }
.mc :focus-visible { outline: 4px solid #2f9bff; outline-offset: 3px; }
/* ===== 무대: 하늘 + 들판 + 벌집 ===== */
.mc-stage { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  background:
    radial-gradient(1200px 380px at 50% 112%, var(--grass) 0 60%, transparent 61%),
    radial-gradient(900px 300px at 12% 108%, var(--meadow) 0 60%, transparent 61%),
    linear-gradient(180deg, var(--sky) 0%, #eef9ff 55%, #f4fbe9 100%); }
.mc-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath d='M14 0h28l14 24-14 24H14L0 24z' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E"); }
.mc-cloud { position: absolute; width: 180px; height: 56px; background: #fff; border-radius: 40px; opacity: .85; }
.mc-cloud::before, .mc-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.mc-cloud::before { width: 80px; height: 80px; left: 26px; top: -38px; } .mc-cloud::after { width: 60px; height: 60px; left: 90px; top: -26px; }
@media (prefers-reduced-motion: no-preference) { .mc-cloud { animation: mc-drift 40s linear infinite; } @keyframes mc-drift { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } } }

.mc-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 16px 28px; font-size: 20px; font-weight: 700; }
.mc-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 22px; background: rgba(255,255,255,.9); box-shadow: 0 3px 0 rgba(36,48,61,.12); font-size: 20px; font-weight: 800; }
.mc-pill small { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.mc-bar .mc-right { margin-left: auto; display: flex; gap: 10px; }
.mc-ghost { height: 44px; padding: 0 18px; border-radius: 22px; border: 0; background: rgba(255,255,255,.55); font: inherit; font-size: 17px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.mc-main { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; padding: 8px 28px 28px; }

/* ===== 대기 ===== */
.mc-sign { position: relative; text-align: center; background: var(--paper); border: 6px solid var(--honey); border-radius: 32px; padding: 26px 56px 22px; box-shadow: 0 12px 0 var(--honey-d), 0 24px 40px -12px rgba(36,48,61,.3); }
.mc-sign p { margin: 0; font-size: 26px; font-weight: 700; color: var(--ink-2); }
.mc-sign p b { color: var(--ink); }
.mc-code { font-size: clamp(90px, 13vw, 180px); font-weight: 900; letter-spacing: .06em; line-height: 1; margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.mc-sign .mc-host { position: absolute; left: -130px; bottom: -30px; width: 190px; }
@media (prefers-reduced-motion: no-preference) { .mc-sign .mc-host { animation: mc-bob 2.4s ease-in-out infinite; } @keyframes mc-bob { 50% { transform: translateY(-12px) rotate(-3deg); } } }
.mc-hive { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; max-width: 1180px; margin-top: 40px; }
.mc-kid { display: grid; justify-items: center; gap: 2px; width: 104px; }
.mc-kid img { width: 92px; height: 92px; object-fit: contain; filter: mc-drop-shadow(0 6px 4px rgba(36,48,61,.18)); }
.mc-kid span { font-size: 19px; font-weight: 800; background: #fff; padding: 2px 12px; border-radius: 14px; box-shadow: 0 2px 0 rgba(36,48,61,.1); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .mc-hive .mc-kid { animation: mc-flyin .9s var(--spring) both; animation-delay: calc(var(--k) * 140ms); }
  @keyframes mc-flyin { from { opacity: 0; transform: translate(calc(var(--dx) * 1px), -260px) rotate(-25deg) scale(.4); } 70% { opacity: 1; } }
}
.mc-go { margin-top: 30px; height: 76px; padding: 0 56px; border: 0; border-radius: 38px; background: var(--c2); color: #fff; font: inherit; font-size: 32px; font-weight: 900; box-shadow: 0 8px 0 #1a6fc2; cursor: pointer; }
.mc-go:active { transform: translateY(6px); box-shadow: 0 2px 0 #1a6fc2; }

/* ===== 문제 ===== */
.mc-qwrap { width: 100%; max-width: 1280px; display: grid; gap: 22px; }
.mc-qhead { display: grid; grid-template-columns: 180px minmax(0,1fr) 180px; align-items: center; gap: 16px; }
.mc-qhead .mc-host { width: 170px; justify-self: center; }
.mc-qcard { background: var(--paper); border-radius: 28px; padding: 26px 30px; text-align: center; box-shadow: 0 10px 0 rgba(36,48,61,.12); }
.mc-qcard .mc-q { font-size: clamp(56px, 8vw, 112px); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; }
.mc-qcard .mc-sub { font-size: 24px; font-weight: 700; color: var(--ink-2); margin-top: 6px; }
.mc-jar { justify-self: center; position: relative; width: 120px; height: 150px; }
.mc-jar .mc-glass { position: absolute; inset: 22px 8px 0; border: 6px solid #fff; border-radius: 18px 18px 28px 28px; background: rgba(255,255,255,.45); overflow: hidden; box-shadow: 0 6px 0 rgba(36,48,61,.12); }
.mc-jar .mc-lid { position: absolute; left: 20px; right: 20px; top: 6px; height: 24px; border-radius: 8px; background: #b77a2a; }
.mc-jar .mc-honey { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, #ffd466, var(--honey-d)); }
.mc-jar b { position: absolute; inset: 22px 0 0; display: grid; place-items: center; font-size: 46px; font-weight: 900; color: var(--ink); z-index: 1; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .mc-jar .mc-honey { animation: mc-drain 10s linear forwards; } @keyframes mc-drain { from { height: 100%; } to { height: 0; } } }
.mc-opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.mc-opt { position: relative; display: flex; align-items: center; gap: 20px; min-height: 118px; padding: 18px 28px; border-radius: 26px; color: #fff; font-size: clamp(34px, 3.6vw, 50px); font-weight: 900; box-shadow: 0 9px 0 rgba(0,0,0,.18); transition: transform .4s var(--spring), opacity .3s, filter .3s; }
.mc-opt .mc-sh { flex: none; width: 64px; height: 64px; display: grid; place-items: center; background: rgba(255,255,255,.25); border-radius: 18px; }
.mc-opt .mc-sh svg { width: 40px; height: 40px; fill: #fff; }
.mc-o1 { background: var(--c1); } .mc-o2 { background: var(--c2); } .mc-o3 { background: var(--c3); color: #3a2a00; } .mc-o4 { background: var(--c4); }
.mc-o3 .mc-sh svg { fill: #3a2a00; }
.mc-reveal .mc-opt:not(.mc-right) { opacity: .28; filter: grayscale(.6); transform: scale(.96); }
.mc-reveal .mc-opt.mc-right { transform: scale(1.04); box-shadow: 0 0 0 8px #fff, 0 14px 0 rgba(0,0,0,.18); }
.mc-opt .mc-tick { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; border-radius: 50%; background: #fff; display: none; place-items: center; }
.mc-opt .mc-tick svg { width: 40px; height: 40px; stroke: var(--c4); stroke-width: 4; fill: none; }
.mc-reveal .mc-opt.mc-right .mc-tick { display: grid; }
@media (prefers-reduced-motion: no-preference) { .mc-reveal .mc-opt.mc-right .mc-tick { animation: mc-pop .6s var(--spring) both; } @keyframes mc-pop { from { transform: translateY(-50%) scale(0); } } }
.mc-answered { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 24px; font-weight: 800; color: var(--ink-2); }
.mc-answered .mc-bees { display: flex; }
.mc-answered .mc-bees img { width: 44px; height: 44px; object-fit: contain; margin-left: -10px; filter: mc-drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.mc-answered b { color: var(--ink); font-size: 32px; }
.mc-has-rank .mc-main { padding-right: 300px; }
.mc-side-rank { position: absolute; right: 24px; top: 84px; width: 250px; background: rgba(255,255,255,.92); border-radius: 22px; padding: 14px 16px; box-shadow: 0 6px 0 rgba(36,48,61,.1); z-index: 3; }
.mc-side-rank h3 { margin: 0 0 6px; font-size: 18px; }
.mc-side-rank li { display: grid; grid-template-columns: 26px 38px minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 5px 0; font-size: 18px; font-weight: 800; }
.mc-side-rank ol { margin: 0; padding: 0; list-style: none; }
.mc-side-rank li i { font-style: normal; color: var(--ink-2); }
.mc-side-rank li img { width: 34px; height: 34px; object-fit: contain; }
.mc-side-rank li b { font-variant-numeric: tabular-nums; }
.mc-side-rank li.mc-up { color: var(--c4); }
.mc-kids-got { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.mc-kids-got img { width: 58px; height: 58px; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) { .mc-reveal .mc-kids-got img { animation: mc-hop .7s var(--spring) both; animation-delay: calc(var(--k) * 70ms + .2s); } @keyframes mc-hop { 0% { transform: translateY(30px); opacity: 0; } 60% { transform: translateY(-14px); opacity: 1; } } }

/* ===== 결과 ===== */
.mc-podium { display: grid; grid-template-columns: repeat(3, 250px); align-items: end; gap: 18px; }
.mc-pl { display: grid; justify-items: center; }
.mc-pl img { width: 150px; height: 150px; object-fit: contain; filter: mc-drop-shadow(0 8px 6px rgba(36,48,61,.2)); }
.mc-pl.mc-first img { width: 200px; height: 200px; }
.mc-pl .mc-nm { font-size: 34px; font-weight: 900; background: #fff; padding: 2px 18px; border-radius: 18px; margin: 6px 0 4px; box-shadow: 0 3px 0 rgba(36,48,61,.1); }
.mc-pl .mc-pt { font-size: 22px; font-weight: 800; color: var(--ink-2); margin-bottom: 10px; }
.mc-pl .mc-step { width: 100%; border-radius: 22px 22px 0 0; display: grid; place-items: center; font-size: 76px; font-weight: 900; color: #fff; box-shadow: inset 0 -12px 0 rgba(0,0,0,.12); }
.mc-crown { width: 90px; margin-bottom: -26px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mc-pl { animation: mc-rise .9s var(--spring) both; } .mc-pl.mc-third { animation-delay: .2s; } .mc-pl.mc-second { animation-delay: .5s; } .mc-pl.mc-first { animation-delay: .9s; }
  @keyframes mc-rise { from { opacity: 0; transform: translateY(120px); } }
}
.mc-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.mc-confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { .mc-confetti i { animation: mc-fall linear infinite; } @keyframes mc-fall { to { transform: translateY(110vh) rotate(720deg); } } }
@media (prefers-reduced-motion: reduce) { .mc-confetti { display: none; } }
.mc-endbtns { display: flex; gap: 12px; justify-content: center; margin-top: 26px; }
.mc-endbtns button { height: 56px; padding: 0 26px; border-radius: 28px; border: 0; background: #fff; font: inherit; font-size: 20px; font-weight: 800; box-shadow: 0 5px 0 rgba(36,48,61,.15); cursor: pointer; }
.mc-endbtns .mc-again { background: var(--c2); color: #fff; box-shadow: 0 5px 0 #1a6fc2; }

/* ===== 빙고 ===== */
.mc-bgo { width: 100%; max-width: 1280px; display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 24px; align-items: center; }
.mc-ball-area { display: grid; grid-template-columns: 220px minmax(0,1fr); align-items: center; gap: 8px; }
.mc-ball-area .mc-host { width: 220px; }
.mc-ball { position: relative; background: var(--paper); border-radius: 36px; padding: 30px 30px 26px; text-align: center; box-shadow: 0 12px 0 rgba(36,48,61,.12); border: 6px solid var(--honey); }
.mc-ball .mc-no { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 72px; height: 72px; border-radius: 50%; background: var(--c1); color: #fff; font-size: 34px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 5px 0 #c9406d; }
.mc-ball .mc-ko { font-size: clamp(80px, 10vw, 140px); font-weight: 900; line-height: 1.05; margin-top: 18px; }
.mc-ball .mc-ex { font-size: 28px; font-weight: 700; color: var(--ink-2); margin-top: 10px; }
.mc-ball .mc-ex u { text-decoration: none; display: inline-block; min-width: 110px; border-bottom: 4px dashed var(--honey-d); }
.mc-ball .mc-ex small { display: block; font-size: 22px; margin-top: 4px; font-weight: 600; }
.mc-ball .mc-row { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
.mc-ball .mc-row button { height: 58px; padding: 0 26px; border-radius: 29px; border: 0; font: inherit; font-size: 22px; font-weight: 800; cursor: pointer; background: #eef6ff; color: var(--ink); box-shadow: 0 5px 0 rgba(36,48,61,.12); }
.mc-ball .mc-row .mc-next { background: var(--c2); color: #fff; box-shadow: 0 5px 0 #1a6fc2; }
@media (prefers-reduced-motion: no-preference) { .mc-ball { animation: mc-drop .9s var(--spring) both; } @keyframes mc-drop { from { transform: translateY(-120px) rotate(-6deg); opacity: 0; } } }
.mc-combs { background: rgba(255,255,255,.9); border-radius: 26px; padding: 16px 18px 18px; box-shadow: 0 6px 0 rgba(36,48,61,.1); }
.mc-combs h3 { margin: 0 0 10px; font-size: 20px; }
.mc-comb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mc-comb { aspect-ratio: 1.15; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #ffe7a3; display: grid; place-items: center; text-align: center; font-size: 17px; font-weight: 800; line-height: 1.15; padding: 4px; }
.mc-comb small { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mc-comb.mc-new { background: var(--honey); }
.mc-bingo-btn { height: 52px; padding: 0 22px; border: 0; border-radius: 26px; background: var(--c1); color: #fff; font: inherit; font-size: 20px; font-weight: 900; box-shadow: 0 5px 0 #c9406d; cursor: pointer; }
@media (max-width: 900px) {
  .mc-has-rank .mc-main { padding-right: 28px; }
  .mc-opts { grid-template-columns: 1fr; } .mc-qhead { grid-template-columns: 1fr; } .mc-qhead .mc-host, .mc-jar { display: none; }
  .mc-side-rank { position: static; width: auto; margin: 0 16px; } .mc-podium { grid-template-columns: repeat(3, 1fr); } .mc-pl img, .mc-pl.mc-first img { width: 90px; height: 90px; }
  .mc-bgo { grid-template-columns: 1fr; } .mc-ball-area { grid-template-columns: 1fr; } .mc-ball-area .mc-host { display: none; } .mc-sign .mc-host { display: none; }
}