@font-face{font-family:'BMJUA';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'PyeongChangPeace';src:url('/assets/PyeongChangPeace-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'PyeongChangPeace';src:url('/assets/PyeongChangPeace-Light.ttf') format('truetype');font-weight:300;font-display:swap}

:root{
  --purple:#6C59B4; --purple-d:#4B3786; --purple-sh:#3E2D72; --purple-l:#8F7BD4;
  --ink:#3A2E66; --ink-2:#6B6390; --muted:#8A82A8; --faint:#BDB6D4;
  --gold:#F5B63F; --gold-d:#EDA226; --gold-sh:#C57F10; --gold-ink:#B07E1A; --gold-lt:#FDF3DC; --gold-br:#F5D98F; --gold-soft:#FFDF9E;
  --mint:#3FC98C; --mint-d:#2E9D6C; --mint-lt:#E3F7EE; --mint-soft:#7BE9B8;
  --coral:#FF6F61; --coral-lt:#FFEBE8; --coral-soft:#FFB3A9;
  --lav:#F1EEFA; --lav-2:#EDE5FB; --lav-br:#E3DDF4; --blue-lt:#E4F1FD;
}
*{-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:#FFF;height:100%}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);overscroll-behavior:none}
input,button{font-family:inherit}
a{color:var(--purple);text-decoration:none}a:hover{color:var(--purple-d)}

.app{max-width:460px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative;background:#FFF}
@media (min-width:520px){.app{box-shadow:0 0 0 1px var(--lav-br),0 24px 60px rgba(76,55,134,.10)}}
.screen{flex:1;display:flex;flex-direction:column;padding:36px 26px 30px;box-sizing:border-box;position:relative;overflow:hidden;min-height:100dvh}
.screen.center{align-items:center}
.screen.game{background:linear-gradient(180deg,#6C59B4 0%,#4B3786 100%);padding:26px 22px 28px}
.grow{flex:1}.push{margin-top:auto}
.boot{flex:1;display:flex;align-items:center;justify-content:center;min-height:100dvh}

/* 버튼 (3D pill) */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;border:none;border-radius:999px;padding:17px;font-size:18px;font-weight:800;cursor:pointer;transition:transform .06s,box-shadow .06s}
.btn:active{transform:translateY(3px)}
.btn-primary{background:linear-gradient(180deg,#6C59B4,#5A47A2);color:#fff;box-shadow:0 6px 0 var(--purple-sh)}
.btn-primary:active{box-shadow:0 3px 0 var(--purple-sh)}
.btn-gold{background:linear-gradient(180deg,#F5B63F,#EDA226);color:#5C3E00;box-shadow:0 6px 0 var(--gold-sh)}
.btn-gold:active{box-shadow:0 3px 0 var(--gold-sh)}
.btn-soft{background:var(--lav);color:var(--purple-d);border:2px solid var(--lav-br);box-shadow:none;padding:13px;font-size:15px}
.btn-soft:active{transform:scale(.97)}
.btn-goldsoft{background:var(--gold-lt);color:var(--gold-ink);border:2px solid var(--gold-br);box-shadow:none;padding:13px;font-size:15px}
.btn-goldsoft:active{transform:scale(.97)}
.btn-text{background:none;border:none;color:var(--faint);font-size:13px;font-weight:600;cursor:pointer;padding:8px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-sm{padding:13px;font-size:14.5px}

.sns{justify-content:flex-start;padding:15px 22px;font-size:16px}
.sns .lbl{flex:1;text-align:center;margin-right:26px}
.sns .ic{width:26px;height:26px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.sns-kakao{background:#FEE500;color:#191600;box-shadow:0 5px 0 #D4BE00}.sns-kakao:active{box-shadow:0 2px 0 #D4BE00}
.sns-kakao .ic{background:#191600;color:#FEE500}
.sns-naver{background:#03C75A;color:#fff;box-shadow:0 5px 0 #029B47}.sns-naver:active{box-shadow:0 2px 0 #029B47}
.sns-naver .ic{background:#fff;color:#03C75A}
.sns-google{background:#fff;color:var(--ink);border:2px solid var(--lav-br);box-shadow:0 5px 0 var(--lav-br);padding:14px 22px}.sns-google:active{box-shadow:0 2px 0 var(--lav-br)}
.sns-google .ic{background:var(--lav);color:#4285F4}

/* 타이포 */
.brand-sm{font-family:PyeongChangPeace,BMJUA,sans-serif;font-weight:700;letter-spacing:.06em;color:var(--mint-d);line-height:1}
.brand-lg{font-family:PyeongChangPeace,BMJUA,sans-serif;font-weight:700;color:var(--purple-d);line-height:1.1;margin:2px 0 0}
h2.title{font-family:BMJUA,sans-serif;font-weight:400;font-size:30px;color:var(--purple-d);margin:0;text-align:center}
.sub{font-size:13.5px;color:var(--muted);text-align:center;line-height:1.6}
.lead{font-size:14.5px;color:var(--muted);text-align:center;line-height:1.6;margin:14px 0 0}
.label{font-size:12.5px;font-weight:800;color:var(--purple-d);margin:18px 0 8px}
.req{color:var(--coral)}
.hint-note{font-size:11.5px;color:var(--faint);text-align:center;line-height:1.5}
.err{font-size:13px;color:var(--coral);text-align:center;font-weight:600;margin-top:8px}

.field{width:100%;box-sizing:border-box;background:var(--lav);border:2px solid var(--lav-br);border-radius:999px;padding:15px 18px;font-size:16.5px;color:var(--ink);text-align:center;outline:none}
.field:focus{border-color:var(--purple)}

.bell{width:132px;height:132px;border-radius:50%;background:linear-gradient(180deg,#6C59B4,#4B3786);display:flex;align-items:center;justify-content:center;font-size:64px;box-shadow:0 14px 30px rgba(76,55,134,.35);animation:bellRing 2.8s ease-in-out infinite;transform-origin:top center}
.bell.sm{width:112px;height:112px;font-size:54px}
.chip{position:absolute;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px}
.chip.sm{width:42px;height:42px;border-radius:13px;font-size:22px}
.chip.xs{width:34px;height:34px;border-radius:11px;font-size:17px}
.subtitle-pill{font-family:PyeongChangPeace,BMJUA,sans-serif;font-weight:700;letter-spacing:.14em;color:var(--purple);background:var(--lav-2);border-radius:999px;line-height:1.2}
.dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px}
.row{display:flex;align-items:center;gap:10px}
.card{display:flex;gap:14px;align-items:center;background:var(--lav);border-radius:20px;padding:15px 16px}
.card .ic{width:46px;height:46px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px}
.card b{display:block;font-weight:800;font-size:15px;color:var(--ink)}
.card span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.badge-best{font-size:13px;font-weight:700;color:var(--gold-ink);background:var(--gold-lt);border:1.5px solid var(--gold-br);border-radius:999px;padding:8px 18px}
.consent{background:var(--lav);border-radius:16px;padding:13px 15px;font-size:12px;color:var(--ink-2);line-height:1.6}
.consent b{color:var(--purple-d)}
.check{display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;background:none;border:none;padding:2px;cursor:pointer}
.check .box{width:24px;height:24px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;background:var(--lav);color:#D6CFE8;border:2px solid var(--lav-br)}
.check.on .box{background:var(--purple);color:#fff;border-color:var(--purple)}
.check .txt{flex:1;text-align:left;font-size:13.5px;font-weight:700;color:var(--ink)}
.account{display:flex;align-items:center;gap:11px;background:var(--lav);border-radius:999px;padding:9px 16px}
.account .av{width:32px;height:32px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.account .who{flex:1;min-width:0}
.account .nm{font-size:14px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account .em{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account .plays{flex:none;font-size:11.5px;font-weight:800;color:var(--gold-ink);background:var(--gold-lt);border-radius:999px;padding:5px 11px}
.logo{height:26px;margin-top:22px;object-fit:contain;align-self:center}

/* 게임 */
.qnum{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.hintbtn{margin-left:auto;margin-right:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:var(--gold-soft);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:800;cursor:pointer}
.hintbtn[disabled]{opacity:.35;pointer-events:none}
.timer{position:relative;flex:none}
.timer.warn{animation:pulse .55s ease-in-out infinite}
.timer .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.timer .boom{position:absolute;inset:-14px;display:flex;align-items:center;justify-content:center;font-size:46px;animation:boom .7s ease-out forwards;pointer-events:none}
.progress{height:6px;background:rgba(255,255,255,.18);border-radius:99px;margin-top:14px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#3FC98C,#F5B63F);border-radius:99px;transition:width .4s}
.qwrap{position:relative;flex:1;display:flex;flex-direction:column;margin-top:6px}
.qcard{position:relative;flex:1;display:flex;flex-direction:column;animation:cardIn .45s cubic-bezier(.2,.8,.3,1)}
.lv{font-size:11.5px;font-weight:800;color:var(--ink);border-radius:999px;padding:4px 11px}
.lv-하{background:var(--mint)}.lv-중{background:var(--gold)}.lv-상{background:var(--coral)}
.area{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.65)}
.qtext{font-family:BMJUA,sans-serif;font-size:24px;line-height:1.45;margin-top:14px;color:#fff;text-wrap:pretty}
.sahint{margin-top:12px;font-size:14px;font-weight:700;color:var(--gold-soft);background:rgba(245,182,63,.18);border:1.5px dashed rgba(245,182,63,.6);border-radius:12px;padding:8px 14px;align-self:flex-start}
.choices{display:flex;flex-direction:column;gap:12px;margin-top:20px;padding-bottom:8px}
.choice{display:flex;gap:11px;align-items:center;width:100%;box-sizing:border-box;padding:13px 16px;border-radius:999px;background:#fff;border:none;color:var(--ink);font-size:15px;font-weight:700;line-height:1.4;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.22);transition:opacity .3s,transform .06s,box-shadow .06s;text-align:left}
.choice:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.22)}
.choice .n{width:26px;height:26px;flex:none;border-radius:50%;background:var(--lav-2);color:var(--purple);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.choice.off{opacity:.28;pointer-events:none}
.board{margin-top:18px;background:#fff;border-radius:22px;padding:18px;box-shadow:0 7px 0 rgba(0,0,0,.22)}
.board.lift{animation:liftUp .6s cubic-bezier(.3,.7,.3,1) forwards}
.board .cap{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--faint)}
.board input{width:100%;box-sizing:border-box;background:transparent;border:none;border-bottom:3px solid var(--purple);font-family:BMJUA,sans-serif;font-size:26px;color:var(--ink);text-align:center;padding:8px 4px;outline:none;margin-top:8px}
.hand{position:absolute;bottom:-60px;left:50%;margin-left:-34px;font-size:68px;animation:handUp .6s cubic-bezier(.3,.7,.3,1) forwards;z-index:4;pointer-events:none}
.fb{position:absolute;inset:-10px;background:rgba(59,42,105,.96);border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;cursor:pointer;animation:fadeUp .25s ease-out;z-index:5}
.fb .em{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:52px}
.fb .em.ok{background:var(--mint);animation:bellRing .9s ease-in-out;transform-origin:top center;box-shadow:0 10px 26px rgba(63,201,140,.4)}
.fb .em.no{background:rgba(255,255,255,.12);opacity:.85}
.fb h3{font-family:BMJUA,sans-serif;font-size:30px;margin:16px 0 0;font-weight:400}
.fb h3.ok{color:var(--mint-soft)}.fb h3.no{color:var(--coral-soft)}
.fb .ans{margin-top:16px;font-size:15px;color:var(--gold-soft);font-weight:800}
.fb .exp{margin-top:8px;font-size:14px;color:rgba(255,255,255,.75);line-height:1.55;text-wrap:pretty}
.fb .sc{margin-top:22px;font-size:14px;font-weight:800;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 20px;font-variant-numeric:tabular-nums}
.fb .tap{margin-top:14px;font-size:11.5px;color:rgba(255,255,255,.45)}

/* 결과 */
.emblem{width:128px;height:128px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:62px;background:var(--lav);box-shadow:0 10px 24px rgba(76,55,134,.12);animation:fadeUp .5s ease-out}
.emblem.gold{background:linear-gradient(180deg,#F5B63F,#EDA226);box-shadow:0 14px 32px rgba(245,182,63,.45);animation:bellRing 1.6s ease-in-out,ripple 1.6s ease-out;transform-origin:top center}
.gname{font-family:BMJUA,sans-serif;font-size:32px;color:var(--purple-d);margin-top:18px;text-align:center}
.gmsg{font-size:14px;color:var(--muted);margin-top:8px;text-align:center;line-height:1.55;text-wrap:pretty}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:24px}
.stat{background:var(--lav);border-radius:18px;padding:14px;text-align:center}
.stat .k{font-size:12px;color:var(--muted);font-weight:600}
.stat .v{font-family:BMJUA,sans-serif;font-size:23px;color:var(--purple-d);margin-top:2px;font-variant-numeric:tabular-nums}
.stat .v.gold{color:#F5A623}
.areas{width:100%;margin-top:14px;background:var(--lav);border-radius:20px;padding:16px;box-sizing:border-box}
.areas h4{font-size:13px;font-weight:800;color:var(--purple-d);margin:0 0 12px}
.abar{flex:1;height:9px;background:var(--lav-br);border-radius:99px;overflow:hidden}
.abar i{display:block;height:100%;background:linear-gradient(90deg,#6C59B4,#8F7BD4);border-radius:99px}
.aname{width:110px;flex:none;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.aval{width:36px;flex:none;text-align:right;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--purple-d)}

/* 랭킹 */
.tabs{display:flex;gap:8px;background:var(--lav);border-radius:999px;padding:5px;margin:14px 0 10px}
.tab{flex:1;border:none;border-radius:999px;padding:11px;font-size:14.5px;font-weight:800;cursor:pointer;background:transparent;color:var(--muted)}
.tab.on{background:#fff;color:var(--purple-d);box-shadow:0 2px 6px rgba(76,55,134,.14)}
.list{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.rank{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;box-sizing:border-box;background:var(--lav);border:2px solid transparent}
.rank.top{background:var(--gold-lt)}
.rank.me{background:var(--lav-2);border-color:var(--purple)}
.rank .p{width:32px;flex:none;font-family:BMJUA,sans-serif;font-size:17px;color:#F5A623;font-variant-numeric:tabular-nums}
.rank .who{flex:1;min-width:0}
.rank .nk{font-weight:800;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .em{font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .mn{flex:none;font-weight:800;font-size:15px;color:var(--purple-d);font-variant-numeric:tabular-nums}
.rank .sb{flex:none;width:74px;text-align:right;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--faint);font-size:14px;padding:40px 0;line-height:1.6}

/* 오답노트 */
.note{background:var(--lav);border-radius:20px;padding:16px}
.note .q{font-size:15px;font-weight:800;line-height:1.5;color:var(--ink);text-wrap:pretty}
.note .meta{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:13.5px}
.note .my{color:var(--muted)}.note .my b{color:var(--ink-2);font-weight:600}
.note .an{color:var(--gold-ink);font-weight:800}
.note .ex{color:var(--mint-d);line-height:1.5}

.overlay{position:absolute;inset:0;background:rgba(255,255,255,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:9}
.spinner{width:52px;height:52px;border-radius:50%;border:5px solid var(--lav-br);border-top-color:var(--purple);animation:spin .8s linear infinite}
.overlay .t{font-size:14px;font-weight:700;color:var(--purple-d)}

@keyframes cardIn{from{transform:translateX(-110%) rotate(-2deg);opacity:0}to{transform:translateX(0) rotate(0);opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes boom{0%{transform:scale(.2);opacity:1}70%{transform:scale(1.7);opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes bellRing{0%,100%{transform:rotate(0)}15%{transform:rotate(20deg)}35%{transform:rotate(-16deg)}55%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}90%{transform:rotate(3deg)}}
@keyframes ripple{from{box-shadow:0 0 0 0 rgba(245,182,63,.5)}to{box-shadow:0 0 0 34px rgba(245,182,63,0)}}
@keyframes liftUp{to{transform:translateY(-90px) rotate(-3deg);opacity:.9}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes drift{0%{transform:translate(0,0) rotate(-4deg)}33%{transform:translate(7px,-13px) rotate(5deg)}66%{transform:translate(-6px,-6px) rotate(-3deg)}100%{transform:translate(0,0) rotate(-4deg)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(6deg)}75%{transform:translateY(6px) rotate(-6deg)}}
@keyframes handUp{from{transform:translateY(160px)}to{transform:translateY(-70px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}