/* 총괄시험 (독립 페이지) */
.gm-page { height: auto; min-height: 100%; }
.gm { max-width: 720px; margin: 0 auto; padding: 24px 18px 60px; }
.gm__card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px 26px; margin-bottom: 18px; }
.gm__card h3 { font-size: 15px; margin-bottom: 12px; }
.gm__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gm__chip { border: 1.5px solid #cfdbe1; background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 16px; font-size: 14px; }
.gm__chip:hover { background: #f1f8fa; }
.gm__chip.is-on { background: #e5f7f9; border-color: var(--teal); color: var(--teal-dark); font-weight: 700; }
.gm__sel { font: inherit; font-size: 14px; padding: 6px 10px; border: 1.5px solid #cfdbe1; border-radius: 10px; background: #fff; }
.gm__range { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 340px; overflow-y: auto; margin-top: 10px; }
.gm__range label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.gm__range label:hover { background: #f1f8fa; }
.gm__msg { color: #c43f26; font-size: 14px; margin: 8px 0 0; min-height: 1.4em; }
.gm__stage { text-align: center; }
.gm__wrong { text-align: left; margin-top: 20px; display: grid; gap: 10px; }
.gm__wrong li { background: #fff8f6; border: 1px solid #ffd9d0; border-radius: 12px; padding: 10px 14px; }
.gm__wrong b { display: block; font-size: 15px; }
.gm__wrong span { font-size: 13.5px; color: var(--muted); }
.gm__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

.gm__stats { display: flex; justify-content: center; gap: 18px; font-size: 13px; color: var(--muted); }
.gm__stats b { color: var(--ink); font-family: var(--font-en); }
.gm__bar { margin: 8px auto 18px; max-width: 360px; width: 100%; }
.gm__score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 20px; }
.gm__score div { background: #f1f8fa; border-radius: 14px; padding: 12px 6px; }
.gm__score small { display: block; font-size: 12px; color: var(--muted); }
.gm__score b { font-size: 18px; font-family: var(--font-en); color: var(--teal-dark); }

.gm__levelcard { text-align: center; }
.gm__levelbadge {
  width: 110px; height: 110px; margin: 10px auto 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff;
  display: grid; place-items: center; font-size: 36px; font-weight: 900; font-family: var(--font-en);
  box-shadow: 0 10px 26px rgba(25, 184, 196, .35);
}

.gm__rep { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
/* 정답 이벤트: "정답!" 말풍선 + 터지는 조각 + 연속 정답 표시 */
#gmQ { position: relative; }
.gm__fx { position: absolute; left: 50%; top: 40%; z-index: 5; pointer-events: none; text-align: center; animation: fxPop 1.2s ease-out forwards; }
.gm__fx b { display: block; font-size: 26px; color: var(--teal-dark); background: rgba(255, 255, 255, .94); border: 2px solid var(--teal); border-radius: 999px; padding: 6px 22px; box-shadow: 0 8px 22px rgba(25, 184, 196, .35); white-space: nowrap; }
.gm__fx span { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 700; color: #c43f26; background: #fff3c9; border-radius: 999px; padding: 2px 14px; white-space: nowrap; }
.gm__fx i { position: absolute; left: 50%; top: 20px; font-style: normal; font-size: 18px; opacity: 0; animation: fxBurst .9s ease-out var(--d) forwards; }
@keyframes fxPop {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  35% { transform: translate(-50%, -50%) scale(1); }
  80% { transform: translate(-50%, -58%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -70%) scale(1); opacity: 0; }
}
@keyframes fxBurst {
  0% { transform: translate(0, 0) scale(.3); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gm__fx, .gm__fx i { animation-duration: .01s; } }
.gm__tag { display: inline-block; margin-bottom: 8px; padding: 3px 14px; border-radius: 999px; background: #fff3c9; color: #8a6d00; font-size: 12.5px; font-weight: 700; }
.gm__replay { border: 1.5px solid var(--teal); background: #fff; color: var(--teal-dark); border-radius: 999px; padding: 4px 14px; font-size: 13px; font-weight: 700; }
.gm__replay:hover { background: #e5f7f9; }
.gm__rep select { font: inherit; font-size: 13px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); }
.gm__audio { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.gm__audio input[type=range] { width: 90px; accent-color: var(--teal); vertical-align: middle; }
.gm__audio select { font: inherit; font-size: 13px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 99px; background: #fff; }

.pg__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pg__top span { font-family: var(--font-en); font-weight: 700; color: var(--teal-dark); }
.pg__sub { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.pg__link { color: var(--teal-dark); font-weight: 700; }
.pg__link:hover { text-decoration: underline; }
.pg__list { display: grid; gap: 8px; margin-top: 14px; }
.pg__list li { display: grid; grid-template-columns: 90px 1fr 70px; gap: 12px; align-items: center; font-size: 13px; }
.pg__list li b { text-align: right; font-family: var(--font-en); font-size: 12.5px; }
.pg__list li.pg__exam { grid-template-columns: 1fr 1fr auto; }

/* 로그인 페이지 */
.lg { max-width: 420px; margin: 0 auto; padding: 32px 18px 60px; }
.lg__title { font-size: 24px; margin-bottom: 4px; }
.lg__sub { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; }
.lg__google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1.5px solid #cfdbe1; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 500; }
.lg__google:hover:not(:disabled) { background: #f6fafb; }
.lg__or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 12.5px; }
.lg__or::before, .lg__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lg__field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.lg__field input { font: inherit; font-size: 15px; padding: 11px 12px; border: 1.5px solid #cfdbe1; border-radius: 10px; color: var(--ink); }
.lg__field input:focus { outline: none; border-color: var(--teal); }
.lg__msg { min-height: 1.4em; margin: 0 0 10px; font-size: 13.5px; color: #c43f26; }
.lg__msg--ok { color: var(--teal-dark); }
.lg__submit { width: 100%; }
.lg__links { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.lg__link { background: none; border: 0; padding: 0; font-size: 13px; color: var(--teal-dark); }
.lg__link:hover { text-decoration: underline; }
.lg__link[hidden] { display: none; }