/* 집현전 한글 탐험 — 퀴즈 방 (초성마을 · 우리말마을 · 맞춤법 숲) */

/* ================================================================ */
/* 1. 공통 무대                                                      */
/* ================================================================ */
.qz-scene {
  --qz-pad: 16px;
  position: relative;
  padding: 0 var(--qz-pad) 18px;
  border: 3px solid var(--ink);
  border-radius: 26px;
  background: var(--paper-2);
  box-shadow: var(--shadow-lg);
}
.qz-top {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 60px;
  margin: 0 calc(var(--qz-pad) * -1) 16px;
  padding: 8px 12px;
  border-radius: 23px 23px 0 0;
  border-bottom: 3px solid var(--ink);
}
.qz-stage { position: relative; }

/* 문제 구슬 */
.qz-board {
  position: relative; z-index: 1;
  display: inline-flex;
  padding: 5px 10px;
  background: rgba(255, 250, 240, .95);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
.qz-beads { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.qz-bead {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 2px dashed #b89a74;
  border-radius: 50%;
  background: #fff;
  color: #9a7d5c;
  font-size: 13px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: transform .2s var(--ease-pop), background-color .2s, border-color .2s;
}
.qz-bead.now {
  border: 3px solid var(--blue);
  color: var(--blue);
  transform: scale(1.14);
  box-shadow: 0 0 0 3px rgba(43, 95, 173, .2);
}
.qz-bead.ok {
  border: 2px solid var(--gold-2);
  background: radial-gradient(circle at 35% 30%, #fff3b0 0%, #ffd452 45%, var(--gold) 80%);
  color: #6b3f00;
  font-size: 17px;
  animation: qz-bead-in .4s var(--ease-pop) both;
}
.qz-bead.no {
  border: 2px solid #a38d77;
  background: #eee4d6;
  color: var(--red);
  font-size: 14px;
}

/* 연속 정답 */
.qz-combo {
  position: absolute; z-index: 2;
  right: 14px; top: 50%;
  height: 34px; margin-top: -17px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 12px;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  font-size: 16px; font-weight: 900;
  white-space: nowrap;
}
.qz-combo:empty { display: none; }
.qz-combo.pop { animation: qz-combo-pop .45s var(--ease-pop) both; }

/* ================================================================ */
/* 2. 초성마을 — 초가지붕 · 말풍선                                   */
/* ================================================================ */
.qz-chosung {
  background:
    radial-gradient(ellipse at 50% 115%, rgba(214, 170, 90, .35), rgba(214, 170, 90, 0) 60%),
    linear-gradient(180deg, #e6f4ff 0%, #fff8e6 50%, #f8e6bd 100%);
}
.qz-chosung .qz-top {
  background:
    radial-gradient(ellipse 40px 22px at 50% 100%, #c48b39 0 96%, rgba(196, 139, 57, 0) 100%) 0 100% / 96px 24px repeat-x,
    radial-gradient(ellipse 34px 30px at 50% 100%, #e7bb65 0 96%, rgba(231, 187, 101, 0) 100%) 48px 100% / 96px 32px repeat-x,
    radial-gradient(ellipse 46px 12px at 18% 30%, rgba(255, 255, 255, .9) 0 95%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 38px 10px at 84% 26%, rgba(255, 255, 255, .85) 0 95%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #b6ddff 0%, #dcf0ff 100%);
  border-bottom-color: #7a5320;
}

.qz-cho-head { gap: 12px; }
.qz-cho-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 30px; }
.qz-pic { font-size: 100px; animation: jh-float 3s ease-in-out infinite; }
.qz-pic.pop-in { animation: jh-pop-in .35s var(--ease-pop); }

.qz-bubble {
  position: relative;
  display: inline-flex; justify-content: center;
  padding: 14px 18px;
  background: #fffbe8;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 4px 0 var(--ink);
}
.qz-bubble::before {
  content: ""; position: absolute; left: -17px; top: 50%;
  transform: translateY(-50%);
  border: 13px solid transparent; border-right: 14px solid var(--ink); border-left: 0;
}
.qz-bubble::after {
  content: ""; position: absolute; left: -11px; top: 50%;
  transform: translateY(-50%);
  border: 10px solid transparent; border-right: 11px solid #fffbe8; border-left: 0;
}
.qz-bubble-solo { padding: 14px 22px; }
.qz-bubble-solo::before, .qz-bubble-solo::after { display: none; }

.qz-tiles { display: flex; justify-content: center; gap: 10px; }
.qz-tile { transition: background .2s ease, box-shadow .2s ease; }
.qz-flip { animation: qz-flip .42s var(--ease-pop) both; }

/* 고학년 뜻풀이 */
.qz-clue {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px;
  max-width: 640px;
  padding: 10px 18px;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 14px;
  box-shadow: 0 3px 0 rgba(43, 95, 173, .35);
  font-size: 21px; font-weight: 800; line-height: 1.4;
  text-align: center;
}
.qz-clue-label { color: var(--blue); font-weight: 900; white-space: nowrap; }

/* ================================================================ */
/* 3. 우리말마을 — 한옥 대문 (기와지붕 · 단청 · 기둥 · 현판)         */
/* ================================================================ */
.qz-urimal {
  --qz-pad: 28px;
  background: linear-gradient(180deg, #f8eed9 0%, #f0e0c0 100%);
  box-shadow:
    inset 12px 0 0 #9b3b28, inset -12px 0 0 #9b3b28,
    inset 15px 0 0 var(--ink), inset -15px 0 0 var(--ink),
    var(--shadow-lg);
}
.qz-urimal .qz-top {
  margin-bottom: 28px;
  border-bottom: 0;
  background:
    radial-gradient(circle at 50% 0, #262e3b 0 8px, rgba(38, 46, 59, 0) 9px) 0 100% / 18px 9px repeat-x,
    repeating-linear-gradient(90deg, #4d5a70 0 14px, #3b4658 14px 18px);
}
.qz-urimal .qz-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: repeating-linear-gradient(90deg, #2f7d5b 0 14px, #d64541 14px 20px, #2b5fad 20px 30px, #f5b82e 30px 34px);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.qz-uri-head { gap: 14px; }
.qz-plaque {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 260px; max-width: 100%;
  padding: 10px 30px 14px;
  background: linear-gradient(180deg, #6e4122 0%, #4d2b13 100%);
  border: 4px solid #2a170a;
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px #c99a4b, 0 5px 0 var(--ink);
  color: #ffe08a;
  transition: background .25s ease;
}
.qz-plaque-tag { font-size: 14px; font-weight: 900; letter-spacing: 3px; color: #f1d7a0; }
.qz-word { font-size: 40px; font-weight: 900; line-height: 1.2; text-shadow: 0 2px 0 #2a170a; overflow-wrap: anywhere; }
.qz-plaque.qz-done {
  background: linear-gradient(180deg, #2f9e44 0%, #1f7433 100%);
  box-shadow: inset 0 0 0 3px #bfe8c6, 0 5px 0 var(--ink);
  color: #fff;
}
.qz-plaque.qz-done .qz-plaque-tag { color: #e1f5e5; }
.qz-plaque.qz-done .qz-word { text-shadow: 0 2px 0 #134d22; }
.qz-urimal .q-prompt b { color: #8a2f1f; }

/* ================================================================ */
/* 4. 맞춤법 숲 — 나뭇잎 · 풀밭                                      */
/* ================================================================ */
.qz-spelling {
  background:
    linear-gradient(0deg, #93c872 0 10px, rgba(147, 200, 114, 0) 10px),
    linear-gradient(180deg, #e0f2d0 0%, #f4fbec 45%, #d4ebc1 100%);
}
.qz-spelling .qz-top {
  background:
    radial-gradient(circle at 50% 0, #3d8b45 0 19px, rgba(61, 139, 69, 0) 20px) 0 0 / 44px 24px repeat-x,
    radial-gradient(circle at 50% 0, #69b25e 0 22px, rgba(105, 178, 94, 0) 23px) 22px 0 / 44px 30px repeat-x,
    conic-gradient(from 155deg at 50% 0, #2f7d3a 0 50deg, rgba(47, 125, 58, 0) 50deg) 0 100% / 34px 30px repeat-x,
    conic-gradient(from 155deg at 50% 0, #5ea957 0 50deg, rgba(94, 169, 87, 0) 50deg) 17px 100% / 34px 38px repeat-x,
    linear-gradient(180deg, #c6ebb5 0%, #eaf8e0 100%);
  border-bottom-color: #2f6b33;
}
.qz-sp-head { gap: 8px; }
.qz-sp-head .qz-pic { font-size: 104px; }
.qz-spelling .btn.option { background: #fffdf4; }
.qz-spelling .btn.option:hover:not(:disabled) { background: #eef8e4; }

/* ================================================================ */
/* 5. '참 잘했어요' 도장                                             */
/* ================================================================ */
.qz-stamp {
  position: absolute; z-index: 3;
  top: -6px; right: 3%;
  width: 92px; height: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 5px double var(--red);
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: #c0302c;
  font-size: 17px; font-weight: 900; line-height: 1.12;
  text-align: center;
  pointer-events: none;
  transform: rotate(-14deg);
  animation: qz-stamp .38s var(--ease-pop) both;
}
.qz-stamp.still { animation: none; }

/* ================================================================ */
/* 6. 움직임                                                         */
/* ================================================================ */
@keyframes qz-flip {
  0% { transform: rotateY(90deg) scale(.85); }
  100% { transform: rotateY(0) scale(1); }
}
@keyframes qz-bead-in {
  0% { transform: scale(.4); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes qz-combo-pop {
  0% { transform: scale(.4); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes qz-stamp {
  0% { transform: scale(2.1) rotate(-30deg); opacity: 0; }
  60% { transform: scale(.92) rotate(-10deg); opacity: 1; }
  100% { transform: scale(1) rotate(-14deg); opacity: 1; }
}
.qz-rm .qz-pic, .qz-rm .qz-flip, .qz-rm .qz-bead.ok, .qz-rm .qz-combo.pop, .qz-rm .qz-stamp, .qz-rm .qz-plaque { animation: none !important; }
.qz-rm .qz-bead { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .qz-pic, .qz-flip, .qz-bead.ok, .qz-combo.pop, .qz-stamp, .qz-plaque { animation: none !important; }
  .qz-bead.now { transform: none; }
}

/* ================================================================ */
/* 7. 반응형                                                         */
/* ================================================================ */
/* 태블릿 가로 / 낮은 화면: 스크롤 없이 한 화면에 */
@media (min-width: 601px) and (max-height: 820px) {
  .qz-top { min-height: 52px; margin-bottom: 12px; padding: 6px 12px; }
  .qz-urimal .qz-top { margin-bottom: 24px; }
  .qz-scene { padding-bottom: 14px; }
  .qz-scene .q-card { padding: 16px 18px; gap: 14px; }
  .qz-pic { font-size: 84px; }
  .qz-sp-head .qz-pic { font-size: 88px; }
  .qz-scene .answers.big .btn.option { min-height: 72px; font-size: 26px; }
  .qz-scene .timer { margin-bottom: 10px; }
}

@media (max-width: 600px) {
  .qz-scene { --qz-pad: 10px; padding-bottom: 12px; border-radius: 20px; }
  .qz-top { min-height: 52px; margin-bottom: 14px; padding: 6px 8px; border-radius: 17px 17px 0 0; }
  .qz-urimal {
    --qz-pad: 16px;
    box-shadow:
      inset 8px 0 0 #9b3b28, inset -8px 0 0 #9b3b28,
      inset 10px 0 0 var(--ink), inset -10px 0 0 var(--ink),
      var(--shadow-lg);
  }
  .qz-urimal .qz-top { margin-bottom: 24px; }
  .qz-board { padding: 4px 7px; }
  .qz-beads { gap: 4px; }
  .qz-bead { width: 24px; height: 24px; font-size: 11px; }
  .qz-bead.ok { font-size: 15px; }
  .qz-combo { top: auto; bottom: -18px; margin-top: 0; right: 8px; height: 30px; font-size: 14px; padding: 0 10px; }
  .qz-pic { font-size: 80px; }
  .qz-sp-head .qz-pic { font-size: 84px; }
  .qz-plaque { min-width: 0; padding: 8px 20px 12px; }
  .qz-word { font-size: 32px; }
  .qz-clue { font-size: 18px; padding: 8px 12px; }
  .qz-stamp { width: 74px; height: 74px; font-size: 14px; border-width: 4px; top: -4px; right: 0; }
}
@media (max-width: 560px) {
  .qz-cho-row { flex-direction: column; gap: 20px; }
  .qz-bubble { padding: 10px 12px; }
  .qz-bubble::before {
    left: 50%; top: -17px; transform: translateX(-50%);
    border: 13px solid transparent; border-bottom: 14px solid var(--ink); border-top: 0;
  }
  .qz-bubble::after {
    left: 50%; top: -11px; transform: translateX(-50%);
    border: 10px solid transparent; border-bottom: 11px solid #fffbe8; border-top: 0;
  }
  .qz-tiles { gap: 8px; }
  .qz-tiles .tile { width: 54px; height: 54px; font-size: 30px; }
}
@media (max-width: 370px) {
  .qz-bead { width: 22px; height: 22px; font-size: 10px; }
  .qz-beads { gap: 3px; }
  .qz-tiles .tile { width: 48px; height: 48px; font-size: 27px; }
}