/* ============================================================
   어사문 어휘 퀴즈 — quiz-core.css
   https://eosamun.crownyuja.co.kr/quiz-core.css

   quiz-core.js 가 만들어 내는 마크업의 옷이다.

   ⚠ hanja-quiz.html 의 인라인 <style> 을 **베낀 것**이다. 잘라 온 것이 아니다.
      CSS 를 잘라 내면 캐스케이드 순서가 바뀌는데, 그 변화는 화면을 한참
      들여다봐야 보이고 A/B 상태 대조로는 안 잡힌다. 그래서 살아 있는 화면은
      건드리지 않고 두 벌로 두되, 갈라지면 회귀 테스트가 잡게 했다
      (출시전략_도구/test_quiz_core.py — 설계서 §6-1 ①의 '복제 + 일치 검사').

   여기 없는 것: html/body · 헤더 · quiz-type-bar 위치 · @media
   그건 화면마다 다른 몫이라 각 페이지가 갖는다.
   ============================================================ */
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
@keyframes popIn{0%{transform:translate(-50%, -50%) scale(.3);opacity:0} 70%{transform:translate(-50%, -50%) scale(1.1);opacity:1} 100%{transform:translate(-50%, -50%) scale(1);opacity:.85}}
@keyframes stampPulse{0%{transform:scale(.8);opacity:0} 50%{transform:scale(1.05);opacity:1} 100%{transform:scale(1);opacity:1}}
@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(-80px) rotate(360deg);opacity:0}}
:root{--gold:#FFD700;--orange:#FF8C00;--bg:#FAF9F6;--green:#4CAF50;--red:#EF4444}
.tab-btn{padding:8px 10px;font-weight:800;border-radius:4px;background:transparent;cursor:pointer;transition:all .2s;font-size:16px;color:#4B5563;display:flex;align-items:center;justify-content:center;white-space:nowrap;flex-shrink:0}
.tab-btn.active{color:#111827;border-bottom:3px solid #111827;}
.tab-btn:hover{color:#000;background:rgba(0,0,0,0.05);}
.vocab-chip{position:relative;padding:8px 12px;border-radius:4px;font-weight:700;font-size:15px;font-family:ui-serif,Georgia,serif;cursor:pointer;transition:all .2s;border:2px dashed #9CA3AF;background:#fff;user-select:none;text-align:center;white-space:nowrap;flex-shrink:0}
.vocab-chip:hover{background:#FEF08A;border-color:#EAB308;transform:translateY(-1px);}
.vocab-chip.selected{background:#FDE047;border-color:#CA8A04;color:#854D0E;}
.vocab-chip.matched{opacity:.5;pointer-events:none;background:#F3F4F6;border-color:#D1D5DB;}
.vocab-chip.wrong{animation:shake .4s ease;border-color:var(--red)}
.def-card{position:relative;padding:12px 14px;border-radius:4px;font-size:15px;font-family:ui-serif,Georgia,serif;cursor:pointer;transition:all .2s;border:2px solid #4B5563;background:rgba(255,255,255,0.7);user-select:none;line-height:1.5;text-align:center;display:flex;align-items:center;gap:10px;min-height:56px;width:100%}
.def-card:hover{background:#FEF08A;border-color:#CA8A04}
.def-card.selected{background:#FDE047;border-color:#CA8A04;color:#854D0E;}
.def-card.matched{background:#F3F4F6;border-color:#D1D5DB;color:#9CA3AF;pointer-events:none}
.def-card.wrong{animation:shake .4s ease;border-color:var(--red);}
.def-num{width:28px;height:28px;border-radius:50%;background:transparent;border:2px solid #111827;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#111827;flex-shrink:0}
.def-card.matched .def-num{border-color:#9CA3AF;color:#9CA3AF}
.blank-marker{display:inline-block;padding:2px 8px;border-radius:0;border-bottom:2px solid #111827;color:#111827;font-weight:700;min-width:50px;text-align:center;margin:0 2px;}
.set-dot{width:12px;height:12px;border-radius:50%;background:#D1D5DB;transition:all .2s;cursor:pointer}
.set-dot.active{background:var(--orange);transform:scale(1.3);box-shadow:0 0 0 3px rgba(255,140,0,.2)}
.set-dot.done{background:var(--green)}
.set-arrow{width:28px;height:28px;border-radius:50%;border:1.5px solid #D1D5DB;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#9CA3AF}
.set-arrow:hover{border-color:var(--orange);color:var(--orange);background:#FFF7ED}
.set-arrow.disabled{opacity:.3;pointer-events:none}
.chips-scroll-ctrl{display:flex;align-items:center;justify-content:center;gap:8px;padding:2px 0 6px;user-select:none}
.chips-arrow-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid #D1D5DB;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;color:#6B7280;box-shadow:0 1px 2px rgba(0,0,0,0.05);flex-shrink:0}
.chips-arrow-btn:hover:not(.disabled){border-color:#F59E0B;color:#B45309;background:#FEF3C7;transform:scale(1.08)}
.chips-arrow-btn.disabled{opacity:.25;pointer-events:none;cursor:default}
.chips-track{width:96px;height:5px;border-radius:3px;background:#E5E7EB;position:relative;overflow:hidden;flex-shrink:0}
.chips-thumb{position:absolute;top:0;left:0;height:100%;background:#F59E0B;border-radius:3px;transition:left .08s ease-out, width .2s}
.hint-box{background:#EEF2FF;border:1.5px solid #A5B4FC;border-radius:10px;padding:10px 14px;font-size:13px;color:#4338CA;text-align:center}
.result-card{background:#fff;border-radius:16px;padding:32px;box-shadow:0 8px 30px rgba(0,0,0,.08);text-align:center}
.btn-primary{background:linear-gradient(135deg,#FF8C00,#F97316);color:#fff;font-weight:800;border:none;padding:14px 28px;border-radius:12px;cursor:pointer;font-size:15px;transition:all .2s;box-shadow:0 4px 15px rgba(255,140,0,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,140,0,.4)}
.btn-secondary{background:#fff;color:#333;font-weight:700;border:2px solid #e5e7eb;padding:12px 24px;border-radius:12px;cursor:pointer;font-size:14px;transition:all .2s}
.btn-secondary:hover{border-color:#FF8C00;color:#FF8C00}
[data-book-state="locked"]{display:none!important}
.tab-btn[data-book-state="open"]{border:1.5px solid var(--yj-book);background:var(--yj-book-tint)}
#adv-toggle[data-book-state="open"]{border:1.5px solid var(--yj-book);background:var(--yj-book-tint);border-radius:var(--yj-r-sm)}
.toggle-wrap{display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;gap:4px}
.toggle-track{width:38px;height:24px;border-radius:12px;background:#D1D5DB;position:relative;transition:background .2s;border:2px solid transparent;flex-shrink:0}
.toggle-track.on{background:#FF8C00}
.toggle-thumb{width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:0;left:0;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;color:#6B7280;line-height:1}
.toggle-track.on .toggle-thumb{left:14px;color:#FF8C00}
.pop-in{animation:stampPulse .3s ease forwards}
.scrollbar-hide::-webkit-scrollbar{display:none}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
.stamp-correct::after{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border: 4px solid var(--red); border-radius: 50%; z-index: 10; pointer-events: none; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; box-shadow: inset 0 0 0 1px rgba(239,68,68,0.2), 0 0 0 1px rgba(239,68,68,0.2);}
.stamp-wrong::after{content: '❌'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; color: var(--red); z-index: 10; pointer-events: none; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}
.chat-window{background: transparent; border: 2px dashed #9CA3AF; border-radius: 4px; overflow: hidden; margin-bottom: 10px; animation: stampPulse 0.3s ease; display: flex; flex-direction: column; min-height: 0; position:relative;}
.chat-window::before{content:'문제 인용문'; position:absolute; top:-10px; left:10px; background:var(--bg); padding:0 4px; font-size:11px; color:#6B7280; font-family:ui-serif,Georgia,serif;}
.chat-header{border-bottom: 2px dashed #E5E7EB; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; color: #111827; flex-shrink: 0; font-family:ui-serif,Georgia,serif;}
.chat-body{padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 500px; overflow-y: visible; background:rgba(255,255,255,0.4);}
.chat-bubble{position:relative; max-width: 85%; padding: 8px 12px; border-radius: 4px; font-size: 14px; font-family:ui-serif,Georgia,serif; line-height: 1.5; word-break: break-keep; border: 1.5px solid #4B5563;}
.chat-left{background: #fff; color: #111827; align-self: flex-start;}
.chat-right{background: #FEF3C7; color: #111827; align-self: flex-end;}
.chat-opt-btn{position:relative; background: white; border: 2px solid #4B5563; border-radius: 4px; padding: 12px; font-weight: 700; font-family:ui-serif,Georgia,serif; font-size: 15px; color: #111827; transition: all 0.2s; cursor: pointer; text-align: center;}
.chat-opt-btn:hover:not(.disabled){border-color: #CA8A04; background: #FEF08A; transform: translateY(-1px);}
.chat-opt-btn.correct{pointer-events: none;}
.chat-opt-btn.wrong{animation: shake 0.4s ease; border-color: var(--red); color: var(--red);}
.chat-opt-btn.disabled{opacity: 0.6; pointer-events: none; border-style:dashed;}
.homo1-word-btn.wrong{animation: shake 0.4s ease; border-color: var(--red) !important; color: var(--red) !important;}
.story-blank{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:2px 8px;margin:0 2px;border-radius:0;background:transparent;border-bottom:2px solid #111827;color:#111827;font-weight:700;cursor:pointer;transition:all .2s;vertical-align:middle;font-family:ui-serif,Georgia,serif;}
.story-blank:hover{background:#FEF08A;color:#854D0E;border-color:#CA8A04}
.story-blank.filled{border-bottom:2px dashed #9CA3AF;color:#4B5563;cursor:default;pointer-events:none}
.story-word-opt{position:relative;padding:12px;border-radius:4px;font-weight:700;font-size:15px;font-family:ui-serif,Georgia,serif;text-align:center;border:2px dashed #9CA3AF;background:#fff;cursor:pointer;transition:all .2s}
.story-word-opt:hover{background:#FEF08A;border-color:#EAB308;}
.story-word-opt.wrong{animation:shake .4s ease;border-color:var(--red);color:var(--red)}