*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;--navy: #16233a;--accent: #3b82f6;--green: #10b981;--red: #ef4444}html,body{width:100%;height:100%;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#131a28,#0b0f16 55%,#06080c);font-family:var(--font);color:#e8eaf0;overscroll-behavior:none;position:fixed;top:0;right:0;bottom:0;left:0}#frame{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);height:100dvh;width:min(100vw,60dvh);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#000;box-shadow:0 0 80px #000c}#gl{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3;background:radial-gradient(90% 75% at 50% 46%,transparent 55%,rgba(6,8,12,.42) 100%)}#fader{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;pointer-events:none;background:#04060a;opacity:1;transition:opacity 1.4s ease}#fader.clear{opacity:0}#fader.flash{background:#f2fff8;transition:opacity .15s ease}#deskCaption{position:fixed;bottom:18px;left:26px;font-size:12px;letter-spacing:.35em;color:#414b5e;z-index:0;white-space:nowrap}@media(max-width:700px){#deskCaption{display:none}}.hidden{display:none!important}#hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}#topbar{position:absolute;top:calc(env(safe-area-inset-top,0px) + .6em);left:.7em;right:.7em;display:flex;align-items:center;gap:.6em;pointer-events:none}#progressBox{flex:1;background:#0a0e169e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.09);border-radius:.8em;padding:.5em .8em .55em}#progressLabel{font-size:.82em;letter-spacing:.02em;color:#cdd6e4}#progressLabel b{color:#7cc4ff;font-size:1.12em}#gauge{display:flex;gap:.28em;margin-top:.4em}#gauge span{flex:1;height:.42em;border-radius:.3em;background:#ffffff21;transition:background .4s,box-shadow .4s}#gauge span.on{background:linear-gradient(90deg,#35d49a,#7cc4ff);box-shadow:0 0 8px #4cd9a88c}#timer{background:#0a0e169e;border:1px solid rgba(255,255,255,.09);border-radius:.7em;padding:.5em .65em;font-size:.82em;font-variant-numeric:tabular-nums;color:#b9c3d4}#muteBtn{pointer-events:auto;background:#0a0e169e;border:1px solid rgba(255,255,255,.09);border-radius:.7em;width:2.5em;height:2.35em;font-size:.95em;color:#fff;cursor:pointer}#crosshair{position:absolute;left:50%;top:52.5%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1.5px #12161e73,inset 0 0 0 1.5px #12161e66;pointer-events:none}#crosshair:after{content:"";position:absolute;left:50%;top:50%;width:2.5px;height:2.5px;margin:-1.25px 0 0 -1.25px;border-radius:50%;background:#fffffff2}#compass{position:absolute;top:calc(env(safe-area-inset-top,0px) + 4.4em);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.5em;background:#06281eb8;border:1px solid rgba(53,212,154,.5);border-radius:2em;padding:.45em 1em;font-size:.85em;color:#a9f5d7;box-shadow:0 0 18px #10b98140}#compassArrow{display:inline-block;font-size:1.15em;color:#35d49a;transition:transform .12s linear}#toast{position:absolute;top:34%;left:50%;transform:translate(-50%);max-width:86%;background:#0c1018d1;border:1px solid rgba(255,255,255,.14);border-radius:.9em;padding:.8em 1.2em;font-size:.95em;text-align:center;line-height:1.5;animation:toastIn .3s ease;white-space:pre-line}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}#hint{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 1em);left:50%;transform:translate(-50%);font-size:.78em;color:#e6ecf6bf;background:#0a0e1680;padding:.45em .9em;border-radius:2em;white-space:nowrap;transition:opacity 1s}#interactBtn{pointer-events:auto;position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 4.6em);left:50%;transform:translate(-50%);background:linear-gradient(180deg,#ffcf6e,#f5a623);color:#3a2b07;border:none;border-radius:2em;padding:.85em 1.7em;font-size:1em;font-weight:800;font-family:var(--font);box-shadow:0 6px 20px #f5a62373,inset 0 1px #ffffff80;cursor:pointer;animation:pulseBtn 1.6s ease-in-out infinite}@keyframes pulseBtn{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.05)}}#stick{position:absolute;width:7.4em;height:7.4em;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:#ffffff0f;transform:translate(-50%,-50%);pointer-events:none}#stickKnob{position:absolute;left:50%;top:50%;width:3em;height:3em;border-radius:50%;background:#ffffff59;border:1px solid rgba(255,255,255,.4);transform:translate(-50%,-50%)}.screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center}#startScreen{background:radial-gradient(90% 60% at 50% 12%,rgba(59,130,246,.16),transparent 60%),linear-gradient(180deg,#0e1524,#0a0f1a 60%,#070a11)}#startScreen:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(124,154,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(124,154,200,.07) 1px,transparent 1px);background-size:3.2em 3.2em;mask-image:radial-gradient(80% 60% at 50% 40%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(80% 60% at 50% 40%,#000 30%,transparent 100%)}.startInner{position:relative;text-align:center;padding:2em 1.6em;width:100%;max-width:30em}.startBadge{display:inline-block;font-size:.72em;letter-spacing:.28em;color:#8fb3e8;border:1px solid rgba(143,179,232,.4);border-radius:2em;padding:.5em 1.2em .45em 1.4em;margin-bottom:1.6em}.title{font-size:4.6em;font-weight:900;letter-spacing:.06em;line-height:1.05;background:linear-gradient(180deg,#fff 20%,#9db8dd 70%,#6485b3);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 44px rgba(124,196,255,.25)}.title span{color:transparent}.subtitle{margin-top:.7em;font-size:.95em;color:#93a3bd;letter-spacing:.12em}.storyBox{margin:1.8em auto 1.6em;font-size:.88em;line-height:1.75;color:#aab7cc;background:#121a2a8c;border:1px solid rgba(255,255,255,.07);border-radius:1em;padding:1.1em 1.2em}.storyBox .goal{margin-top:.8em;color:#dfe8f5}.storyBox b{color:#7cc4ff}#startBtn{font-family:var(--font);font-size:1.18em;font-weight:800;color:#08131f;background:linear-gradient(180deg,#8fd8ff,#3b9df6);border:none;border-radius:2em;padding:.95em 3.2em;cursor:pointer;box-shadow:0 8px 30px #3b9df666,inset 0 1px #fff9;transition:transform .15s,box-shadow .15s,opacity .3s}#startBtn:disabled{opacity:.45;cursor:default}#startBtn:not(:disabled):active{transform:scale(.96)}.controlsHelp{margin-top:1.7em;font-size:.74em;color:#7d8aa3;line-height:1.9}.controlsHelp b{color:#a8c3e8;border:1px solid rgba(168,195,232,.3);border-radius:.5em;padding:.12em .5em;margin-right:.5em}.startFooter{margin-top:1.8em;font-size:.68em;letter-spacing:.12em;color:#4d5a70}#quizScreen{background:#070a1094;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:25;padding:1em}#quizCard{width:100%;max-width:26em;max-height:86%;overflow-y:auto;background:#fdfdfb;color:#1c2430;border-radius:1.2em;padding:1.3em 1.3em 1.4em;box-shadow:0 24px 70px #0000008c;animation:cardIn .28s cubic-bezier(.2,.9,.3,1.2)}@keyframes cardIn{0%{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}#quizTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9em}#quizCat{font-size:.74em;font-weight:800;color:#1d4ed8;background:#dbe8ff;padding:.35em .9em;border-radius:2em}#quizNo{font-size:.72em;color:#94a0b1;letter-spacing:.08em}#quizQ{font-size:1.08em;font-weight:700;line-height:1.55;word-break:keep-all;margin-bottom:1em}#quizChoices{display:flex;flex-direction:column;gap:.55em}#quizChoices.ox{flex-direction:row}.choiceBtn{font-family:var(--font);text-align:left;font-size:.92em;line-height:1.45;word-break:keep-all;background:#f1f3f6;color:#26303e;border:2px solid #e2e6ec;border-radius:.8em;padding:.85em 1em;cursor:pointer;min-height:3.2em;transition:border-color .15s,background .15s,transform .1s}.choiceBtn:not(:disabled):active{transform:scale(.985)}.choiceBtn .cIdx{font-weight:800;color:#3b82f6;margin-right:.5em}.choiceBtn.oxBtn{flex:1;text-align:center;font-size:1.7em;font-weight:900;padding:.55em 0;min-height:2.4em}.choiceBtn.oxBtn.o{color:#2563eb}.choiceBtn.oxBtn.x{color:#dc2626}.choiceBtn.correct{background:#e5f8ee;border-color:#10b981;color:#065f46}.choiceBtn.wrong{background:#fdeaea;border-color:#ef4444;color:#7f1d1d}.choiceBtn.dim{opacity:.5}.choiceBtn:disabled{cursor:default}#quizExplain{margin-top:1em;font-size:.84em;line-height:1.6;word-break:keep-all;background:#f4f6f9;border-left:4px solid #94a8c4;border-radius:.5em;padding:.8em .9em;color:#45505f}#quizExplain.good{border-left-color:#10b981;background:#f0faf5}#quizExplain.bad{border-left-color:#ef4444;background:#fcf3f3}#quizExplain b.verdict{display:block;font-size:1.12em;margin-bottom:.3em}#quizExplain.good b.verdict{color:#059669}#quizExplain.bad b.verdict{color:#dc2626}#quizClose{font-family:var(--font);width:100%;margin-top:1em;font-size:1em;font-weight:800;color:#fff;background:linear-gradient(180deg,#2f3d55,#1d2939);border:none;border-radius:.8em;padding:1em;cursor:pointer}#quizClose:active{transform:scale(.98)}#resultScreen{background:radial-gradient(80% 55% at 50% 10%,rgba(16,185,129,.14),transparent 60%),linear-gradient(180deg,#0d1420,#080c14);z-index:30;padding:1.2em}#resultCard{width:100%;max-width:22em;background:#fbfcfd;color:#1a2230;border-radius:1.3em;overflow:hidden;text-align:center;box-shadow:0 30px 80px #0009;animation:cardIn .4s cubic-bezier(.2,.9,.3,1.15);padding-bottom:1.4em}.badgeTop{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#16233a,#24354f);color:#cfe0f5;font-size:.72em;letter-spacing:.18em;padding:1em 1.4em}.badgeLogo{font-weight:900;color:#7cc4ff;letter-spacing:.3em}.badgePhoto{width:3.2em;height:3.2em;margin:1em auto .4em;border-radius:50%;background:#e8edf4;font-size:1.6em;display:flex;align-items:center;justify-content:center}#resultTitle{font-size:1.05em;color:#5c6b80;letter-spacing:.1em}#resultRank{font-size:2.5em;font-weight:900;margin:.15em 0 .1em;background:linear-gradient(180deg,#1d976c,#2f80ed);-webkit-background-clip:text;background-clip:text;color:transparent}#resultScore{font-size:1.15em;font-weight:800;color:#202b3b;margin-bottom:.9em}#resultStats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5em;margin:0 1.2em 1.2em}#resultStats div{background:#eff2f6;border-radius:.7em;padding:.7em .2em;font-size:.78em;color:#5c6b80;line-height:1.4}#resultStats b{display:block;font-size:1.35em;color:#1c2836}#restartBtn{font-family:var(--font);font-size:1em;font-weight:800;color:#fff;background:linear-gradient(180deg,#34d399,#0ea56d);border:none;border-radius:2em;padding:.9em 2.6em;cursor:pointer;box-shadow:0 8px 24px #10b98159}#restartBtn:active{transform:scale(.96)}#rotateHint{display:none;position:absolute;z-index:50;bottom:1em;left:50%;transform:translate(-50%);background:#0c1018d9;padding:.5em 1.1em;border-radius:2em;font-size:.8em;pointer-events:none}@media(orientation:landscape)and (max-height:500px){#rotateHint{display:block}}