/* === core.js === */

:root{
  --sky:#E8F4FD;--cloud:#fff;--sun:#FFD93D;--orange:#FF6B35;--coral:#FF8C61;
  --mint:#4ECDC4;--teal:#2BB5A8;--violet:#A855F7;--pink:#FF6B9D;
  --green:#6BCB77;--dkgreen:#4CAF63;--red:#FF4757;--navy:#1A1F4E;
  --text:#2D3142;--muted:#8B91A7;--border:#E4E8F0;--gold:#FFB800;
  --shadow:0 4px 20px rgba(0,0,0,.08);--shadow-lg:0 8px 40px rgba(0,0,0,.14);
  --r:18px;--r-sm:12px
}

/* ── AUTH | @CSS:core.js ── */
#screenAuth{background:linear-gradient(160deg,#FFF5EE,#E8F4FD);justify-content:center;align-items:center;padding:24px;padding-bottom:40px}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-logo .logo-rocket{font-size:4rem;display:block;animation:rocketFloat 2s ease-in-out infinite}
.auth-logo h1{font-family:Jua,sans-serif;font-size:2rem;color:var(--orange);margin-top:8px}
.auth-logo p{color:var(--muted);font-size:.82rem;line-height:1.5;text-align:center;padding:0 8px}
.auth-card{background:#fff;border-radius:24px;padding:28px 24px;width:100%;max-width:400px;box-shadow:0 8px 40px rgba(255,107,53,.12)}
.auth-tabs{display:flex;background:var(--sky);border-radius:12px;padding:4px;margin-bottom:24px;gap:4px}
.auth-tab{flex:1;padding:10px;border:none;border-radius:10px;font-family:Jua,sans-serif;font-size:.95rem;cursor:pointer;transition:all .2s;background:transparent;color:var(--muted)}
.auth-tab.active{background:#fff;color:var(--orange);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:5px;letter-spacing:.5px}
.form-input,.form-select{width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:var(--r-sm);font-family:'Nanum Gothic',sans-serif;font-size:.95rem;color:var(--text);outline:none;transition:border-color .2s;background:#FAFBFF;-webkit-appearance:none;appearance:none}
.form-input:focus,.form-select:focus{border-color:var(--orange);background:#fff}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B91A7' fill='none' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pin-row{display:flex;gap:10px;justify-content:center;margin-top:4px}
.pin-input{width:52px;height:54px;border:2px solid var(--border);border-radius:12px;text-align:center;font-family:Jua,sans-serif;font-size:1.4rem;color:var(--text);outline:none;transition:border-color .2s;background:#FAFBFF}
.pin-input:focus{border-color:var(--orange);background:#fff}
.char-avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.char-opt{width:100%;aspect-ratio:1;border-radius:14px;border:3px solid var(--border);cursor:pointer;font-size:2rem;display:flex;align-items:center;justify-content:center;transition:all .2s;background:var(--sky)}
.char-opt.selected{border-color:var(--orange);background:#FFF5EE;transform:scale(1.06)}
/* Photo upload */
.photo-upload-area{border:2px dashed var(--border);border-radius:14px;padding:14px;text-align:center;cursor:pointer;transition:all .2s;background:var(--sky);position:relative}
.photo-upload-area:hover{border-color:var(--orange);background:#FFF5EE}
.photo-preview{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--orange);display:block;margin:0 auto 6px}
.autologin-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.autologin-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--orange);cursor:pointer}
.autologin-row label{font-size:.82rem;color:var(--muted);cursor:pointer}

/* ── MODALS | @CSS:core.js ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:500;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-bg.open{opacity:1;pointer-events:all}
.modal-box{background:#fff;border-radius:24px 24px 0 0;padding:24px;width:100%;max-width:480px;transform:translateY(40px);transition:transform .3s;max-height:90vh;overflow-y:auto}
.modal-bg.open .modal-box{transform:translateY(0)}
.modal-title{font-family:Jua,sans-serif;font-size:1.1rem;color:var(--navy);margin-bottom:16px;display:flex;align-items:center;gap:7px}

/* ── ANIMATIONS | @CSS:core.js ── */
@keyframes rocketFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(5deg)}}
@keyframes charBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes stagePulse{0%,100%{box-shadow:0 4px 18px rgba(255,107,53,.5)}50%{box-shadow:0 6px 28px rgba(255,107,53,.8)}}
@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes fbPop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}70%{transform:translateY(-5px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes coinPop{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.2) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

@media(min-width:768px){
  .screen{align-items:center}
  .screen>*:not(.bottom-nav){max-width:480px;width:100%}
  .bottom-nav{left:50%;transform:translateX(-50%);max-width:480px;border-left:1px solid var(--border);border-right:1px solid var(--border)}
}
/* ── 광고 영역 | @CSS:core.js ── */
#adsense-home{margin:0 14px 14px}
#adsense-home .ad-wrap{max-height:160px;overflow:hidden}
.ad-banner-wrap{margin:8px 14px 4px}
.ad-banner-wrap .ad-wrap{max-height:100px;overflow:hidden}
.ad-label{display:block;text-align:center;font-size:.62rem;color:#bbb;margin-bottom:2px;letter-spacing:.3px}
.ad-wrap{border-radius:12px;overflow:hidden;background:#f8f8f8;min-height:60px;border:1px solid #eee}

/* ── 스플래시 대문 | @CSS:core.js ── */
#screenSplash{
  position:fixed;
  top:0;bottom:0;
  left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;
  z-index:9999;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  overflow:hidden;background:#c8ede8;
  transition:opacity .6s ease;
}
#screenSplash.splash-hide{opacity:0;pointer-events:none;}
#splashImg{
  position:absolute;top:-10%;left:0;right:0;bottom:0;
  width:100%;height:110%;
  object-fit:cover;object-position:center top;
  z-index:0;
  transition:opacity .4s;
}
#splashOverlay{
  position:absolute;bottom:0;left:0;right:0;height:140px;
  background:linear-gradient(to top,rgba(240,210,140,.65) 0%,transparent 100%);
  z-index:1;
}
#splashContent{
  position:relative;z-index:2;
  width:100%;max-width:480px;
  padding:0 36px 44px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
/* 태블릿(600px+): 이미지 위치 center center 유지 */
@media(min-width:600px){
  #splashImg{ object-position:center center; }
  #splashContent{ padding:0 36px 52px; }
}
#splashStartBtn{
  width:100%;padding:17px;border:none;border-radius:32px;
  background:linear-gradient(135deg,#6C3FC8,#9B59B6);
  color:#fff;font-family:Jua,sans-serif;font-size:1.1rem;
  cursor:pointer;letter-spacing:1px;
  box-shadow:0 8px 28px rgba(108,63,200,.4);
  transition:transform .15s,box-shadow .15s;
}
#splashStartBtn:active{transform:translateY(2px);box-shadow:0 4px 14px rgba(108,63,200,.3);}



/* === home.js === */
/* ── HOME | @CSS:home.js ── */
#screenHome{background:linear-gradient(160deg,#FFF5EE,#E8F4FD 50%,#F0FFF4);padding-bottom:80px}
.app-switch-bar{display:flex;gap:6px;padding:10px 16px 4px}
.app-tab{flex:1;padding:7px 2px;border:none;border-radius:20px;font-family:Jua,sans-serif;font-size:.75rem;cursor:pointer;background:rgba(0,0,0,.06);color:var(--muted);transition:all .2s}
.app-tab.active{background:var(--violet);color:#fff;box-shadow:0 3px 10px rgba(108,92,231,.35)}
.app-tab-coming{opacity:.65}
.hanja-grade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 12px 14px}
.korean-type-grid{display:flex;flex-direction:column;gap:10px;padding:0 12px 14px}
.kor-type-card{border-radius:18px;padding:16px 18px;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);position:relative;overflow:hidden;display:flex;align-items:center;gap:14px}
.kor-type-card:active{transform:scale(.97)}
.kor-type-icon{font-size:2.2rem;flex-shrink:0;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.25)}
.kor-type-info{flex:1}
.kor-type-name{font-family:Jua,sans-serif;font-size:1.05rem;color:#fff;margin-bottom:2px}
.kor-type-desc{font-size:.72rem;color:rgba(255,255,255,.8);line-height:1.4}
.kor-type-best{font-size:.68rem;color:rgba(255,255,255,.7);margin-top:4px}
.kor-type-arrow{font-size:1.2rem;color:rgba(255,255,255,.6);flex-shrink:0}
.kor-type-deco{position:absolute;right:-8px;top:-8px;font-size:3.5rem;opacity:.12}
.hanja-grade-card{border-radius:16px;padding:14px 12px;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);position:relative;overflow:hidden;border:none}
.hanja-grade-card:active{transform:scale(.95)}
.hgc-grade{font-family:Jua,sans-serif;font-size:1.15rem;color:#fff;font-weight:bold}
.hgc-full{font-size:.65rem;color:rgba(255,255,255,.8);margin:2px 0 4px}
.hgc-desc{font-size:.7rem;color:rgba(255,255,255,.85)}
.hgc-emoji{position:absolute;right:8px;top:8px;font-size:2rem;opacity:.3}
.hgc-lock{position:absolute;right:10px;bottom:10px;font-size:1rem;opacity:.7}
.home-header{padding:16px 16px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.home-greeting h2{font-family:Jua,sans-serif;font-size:1.25rem;color:var(--navy)}
.home-greeting p{font-size:.8rem;color:var(--muted);margin-top:2px}
.streak-badge{display:flex;align-items:center;gap:4px;background:linear-gradient(135deg,var(--orange),#FF4B00);color:#fff;padding:6px 10px;border-radius:30px;font-family:Jua,sans-serif;font-size:.78rem;box-shadow:0 3px 12px rgba(255,107,53,.35);white-space:nowrap;flex-shrink:0}
.coin-badge{display:flex;align-items:center;gap:4px;background:linear-gradient(135deg,var(--gold),#E08000);color:#fff;padding:5px 10px;border-radius:30px;font-family:Jua,sans-serif;font-size:.78rem;box-shadow:0 3px 10px rgba(255,184,0,.35);margin-top:4px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.char-section{padding:10px 16px;display:flex;align-items:center;gap:12px}
.char-display{width:86px;height:86px;border-radius:50%;background:linear-gradient(135deg,#FFF5EE,#FFE0D0);border:3px solid var(--orange);display:flex;align-items:center;justify-content:center;font-size:3.2rem;flex-shrink:0;box-shadow:0 4px 16px rgba(255,107,53,.2);animation:charBob 2s ease-in-out infinite;overflow:hidden;cursor:pointer}
.char-display img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.char-info{flex:1}
.char-name{font-family:Jua,sans-serif;font-size:1rem;color:var(--navy)}
.char-level{font-size:.76rem;color:var(--muted);margin-top:2px}
.exp-bar{margin-top:8px;height:7px;background:var(--border);border-radius:4px;overflow:hidden}
.exp-fill{height:100%;background:linear-gradient(90deg,var(--orange),#FF4B00);border-radius:4px;transition:width .8s}
.exp-txt{font-size:.68rem;color:var(--muted);margin-top:2px;text-align:right}
.sec-title{font-family:Jua,sans-serif;font-size:.92rem;color:var(--navy);padding:0 16px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.weekly-card{margin:0;background:linear-gradient(135deg,var(--violet),#7C3AED);border-radius:20px;padding:16px 14px 18px;color:#fff;position:relative;overflow:hidden;box-sizing:border-box;box-shadow:0 6px 24px rgba(168,85,247,.35);min-width:0;max-width:100%;width:100%}
.weekly-card::before{content:'⭐';position:absolute;right:-10px;top:-10px;font-size:5rem;opacity:.12}
/* ── 학년별 커리큘럼 | @CSS:home.js ── */
.curr-section{padding:0 12px 4px}
.curr-grade-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#6C3FC8,#9B59B6);color:#fff;border-radius:20px;padding:4px 12px;font-family:Jua,sans-serif;font-size:.78rem;margin-bottom:8px}
.curr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:10px}
.curr-card{border-radius:14px;padding:11px 10px;cursor:pointer;transition:all .2s;border:none;text-align:left;box-shadow:0 2px 8px rgba(0,0,0,.07);position:relative;overflow:hidden}
.curr-card:active{transform:scale(.96)}
.curr-card-top{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.curr-card-emoji{font-size:1.1rem}
.curr-card-name{font-family:Jua,sans-serif;font-size:.85rem;color:#1A1F4E;font-weight:700}
.curr-card-desc{font-size:.72rem;color:#666;line-height:1.3}
.curr-card-lv{position:absolute;top:7px;right:8px;font-size:.65rem;color:#fff;background:rgba(108,63,200,.55);border-radius:8px;padding:1px 6px;font-family:Jua,sans-serif}
.curr-card-done{position:absolute;bottom:6px;right:8px;font-size:.7rem;color:#27AE60;font-weight:700}
.curr-divider{height:1px;background:var(--border);margin:4px 12px 10px}
.type-card{border-radius:15px;padding:14px 8px;text-align:center;cursor:pointer;transition:all .2s;border:none;box-shadow:var(--shadow)}
.type-card:active{transform:scale(.93)}
.type-emoji{font-size:1.9rem;display:block;margin-bottom:5px}
.type-name{font-family:Jua,sans-serif;font-size:.88rem;color:var(--text)}
.type-best{font-size:.65rem;color:var(--muted);margin-top:2px}
.type-card[data-type=add]{background:linear-gradient(135deg,#FFF5EE,#FFE8D6);border:2px solid #FFD0B5}
.type-card[data-type=sub]{background:linear-gradient(135deg,#F0FFF8,#D6F5EC);border:2px solid #B5EDD8}
.type-card[data-type=mul]{background:linear-gradient(135deg,#F5F0FF,#EAD6F5);border:2px solid #D4B5ED}
.type-card[data-type=div]{background:linear-gradient(135deg,#FFF8E1,#FFEDB3);border:2px solid #FFE080}
.type-card[data-type=frac]{background:linear-gradient(135deg,#E8F4FD,#D0E8F5);border:2px solid #B5D8ED}
.rec-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:0 16px;margin-bottom:4px}
.rec-mini{background:#fff;border-radius:13px;padding:11px 10px;box-shadow:var(--shadow);text-align:center}
.rec-mini .rm-t{font-size:.68rem;color:var(--muted);margin-bottom:3px}
.rec-mini .rm-s{font-family:Jua,sans-serif;font-size:1.1rem;color:var(--orange)}
@media(max-width:360px){.rec-grid{grid-template-columns:repeat(3,1fr)}}

/* ── STAGE MAP | @CSS:home.js ── */
#screenStage{background:linear-gradient(180deg,#E8F4FD,#F0FFF8);padding-bottom:var(--safe-pb,80px)}
.stage-hdr{padding:14px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.back-btn{width:38px;height:38px;border-radius:50%;background:#fff;border:none;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.stage-hdr-title{font-family:Jua,sans-serif;font-size:1.15rem;color:var(--navy);flex:1}
.stage-map{padding:10px 14px;display:flex;flex-direction:column;gap:0}
/* 레벨 그룹 (가로 배치) */
.stage-level-block{margin-bottom:14px}
.stage-level-label{font-size:.72rem;font-weight:700;letter-spacing:2px;color:var(--muted);margin-bottom:10px;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.stage-row-h{display:flex;gap:4px;align-items:flex-start;overflow-x:hidden;padding-bottom:4px;justify-content:space-between;-ms-overflow-style:none;scrollbar-width:none}
.stage-row-h::-webkit-scrollbar{display:none}
/* 일반 스테이지 노드 */
.snode{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative}
.snode-arrow{flex-shrink:0;align-self:center;color:var(--muted);font-size:1rem;opacity:.5;margin-top:-16px}
.sbubble{width:46px;height:46px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .22s;box-shadow:0 3px 8px rgba(0,0,0,.1)}
.sbubble:active{transform:scale(.9)}
.snode.locked .sbubble{background:#E4E8F0;box-shadow:none;cursor:default}
.snode.done .sbubble{background:linear-gradient(135deg,var(--green),var(--dkgreen));box-shadow:0 4px 14px rgba(107,203,119,.4)}
.snode.perfect .sbubble{background:linear-gradient(135deg,var(--sun),#FFA500);box-shadow:0 4px 14px rgba(255,217,61,.5)}
.snode.curr .sbubble{background:linear-gradient(135deg,var(--orange),#FF4B00);box-shadow:0 4px 18px rgba(255,107,53,.5);animation:stagePulse 1.8s ease-in-out infinite}
.snode.check .sbubble{background:linear-gradient(135deg,#7C3AED,var(--violet));box-shadow:0 4px 18px rgba(124,58,237,.5)}
.snum{font-family:Jua,sans-serif;font-size:.65rem;color:#fff}
.snode.locked .snum{color:var(--muted)}
.slbl{font-size:.58rem;color:var(--muted);font-family:Jua,sans-serif;text-align:center;line-height:1.2;width:50px}
.snode.curr .slbl{color:var(--orange)}
.snode.check .slbl{color:var(--violet)}
.level-connector{display:flex;align-items:center;justify-content:center;margin:0 0 8px;opacity:.4;font-size:1.1rem}



/* === korean.js === */
/* ── 과제 카드 | @CSS:korean.js ── */
.assign-card{background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 2px 12px rgba(0,0,0,.08);border:1.5px solid #f0ebff;position:relative;overflow:hidden}
.assign-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:16px 0 0 16px}
.assign-card.subject-math::before{background:linear-gradient(180deg,#FF6B6B,#FF8E53)}
.assign-card.subject-hanja::before{background:linear-gradient(180deg,#43B89C,#2ECC71)}
.assign-card.subject-korean::before{background:linear-gradient(180deg,#4ECDC4,#44A08D)}
.assign-card.subject-japanese::before{background:linear-gradient(180deg,#E96950,#F7971E)}
.assign-card.completed{background:#f8fff8;border-color:#c8e6c9}
.assign-card.overdue{background:#fff8f8;border-color:#ffcdd2;opacity:.85}
.assign-card-title{font-family:Jua,sans-serif;font-size:.95rem;color:#222;margin-bottom:4px}
.assign-card-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.assign-tag{font-size:.62rem;padding:2px 7px;border-radius:8px;font-weight:700}
.assign-progress-wrap{margin-bottom:8px}
.assign-progress-bar-bg{height:7px;background:#eee;border-radius:4px;overflow:hidden;margin-bottom:3px}
.assign-progress-bar-fill{height:100%;border-radius:4px;transition:width .5s ease}
.assign-progress-txt{font-size:.68rem;color:#888;display:flex;justify-content:space-between}
.assign-btn{width:100%;padding:9px;border:none;border-radius:12px;font-family:Jua,sans-serif;font-size:.82rem;cursor:pointer;margin-top:4px;transition:opacity .15s}
.assign-btn:active{opacity:.8}
/* 취약 유형 카드 */
.weak-section{margin:0 14px 14px}
.weak-cards{display:flex;flex-direction:column;gap:8px}
.weak-card{background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 2px 10px rgba(0,0,0,.07);border:1.5px solid #fef0f0;display:flex;align-items:center;gap:12px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.weak-card:active{transform:scale(.98);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.weak-rank{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Jua,sans-serif;font-size:.8rem;font-weight:700;flex-shrink:0}
.weak-rank.r1{background:#FFE0E0;color:#E53E3E}
.weak-rank.r2{background:#FFF3CD;color:#D97706}
.weak-rank.r3{background:#E8F4FD;color:#2B7CB0}
.weak-info{flex:1;min-width:0}
.weak-label{font-family:Jua,sans-serif;font-size:.9rem;color:#333;margin-bottom:3px}
.weak-meta{font-size:.68rem;color:#999;display:flex;gap:8px;flex-wrap:wrap}
.weak-bar-wrap{margin-top:5px}
.weak-bar-bg{height:5px;background:#f0f0f0;border-radius:3px;overflow:hidden}
.weak-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#FF6B6B,#FF8E53);transition:width .6s ease}
.weak-btn{padding:6px 12px;border:none;border-radius:20px;background:linear-gradient(135deg,#FF6B6B,#FF8E53);color:#fff;font-family:Jua,sans-serif;font-size:.75rem;cursor:pointer;flex-shrink:0;white-space:nowrap}
.weak-empty{text-align:center;padding:20px;color:#aaa;font-size:.82rem}
.wk-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:6px}
.wk-label{font-size:.68rem;opacity:.8;letter-spacing:.5px;white-space:nowrap}
.wk-week{font-family:Jua,sans-serif;font-size:.75rem;white-space:nowrap;flex-shrink:0}
.wk-scores{display:flex;gap:0;margin-bottom:16px;align-items:center;justify-content:space-around;width:100%;overflow:hidden}
.wk-s{text-align:center;flex:1;min-width:0;overflow:hidden}
.wk-s .v{font-family:Jua,sans-serif;font-size:clamp(.85rem,3.5vw,1.4rem);white-space:nowrap;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.wk-s .l{font-size:.68rem;opacity:.75;margin-top:1px}
.wk-div{width:1px;background:rgba(255,255,255,.2);align-self:stretch}
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 12px;margin-bottom:14px}



/* === quiz.js === */
/* ── QUIZ | @CSS:quiz.js ── */
#screenQuiz{background:linear-gradient(160deg,#FFF5EE,#E8F4FD);padding-bottom:20px}
.quiz-hdr{padding:14px 18px 10px;display:flex;align-items:center;gap:10px}
.q-prog-wrap{flex:1}
.q-prog-info{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:4px;font-family:Jua,sans-serif}
.q-prog-bar{height:7px;background:var(--border);border-radius:4px;overflow:hidden}
.q-prog-fill{height:100%;background:linear-gradient(90deg,var(--orange),#FF4B00);border-radius:4px;transition:width .4s}
.score-chip{background:linear-gradient(135deg,var(--sun),#FFA500);color:#fff;padding:6px 13px;border-radius:20px;font-family:Jua,sans-serif;font-size:.85rem;white-space:nowrap;box-shadow:0 2px 8px rgba(255,169,0,.3)}
.quiz-body{padding:0 18px}
.q-card{background:#fff;border-radius:20px;padding:32px 22px;text-align:center;margin-bottom:14px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.q-type-chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.5px;background:#FFF5EE;color:var(--orange);border:1px solid #FFD0B5}
.q-text{font-family:Jua,sans-serif;font-size:var(--q-text-size,clamp(1.7rem,6.5vw,2.7rem));color:var(--navy);line-height:1.3}
.q-frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 3px;font-size:.62em}
.q-frac .qf-n{border-bottom:3px solid var(--navy);padding:0 4px 1px}
.q-frac .qf-d{padding:1px 4px 0}
.mcq-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.mcq-btn{padding:var(--mcq-btn-pad,17px);border:2.5px solid var(--border);border-radius:15px;background:#fff;font-family:Jua,'Noto Sans KR','Noto Sans CJK KR',sans-serif;font-size:var(--mcq-btn-size,1.2rem);color:var(--navy);cursor:pointer;transition:all .18s;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.mcq-btn:active{transform:scale(.94)}
.mcq-btn.ok{border-color:var(--green);background:#F0FFF4;color:var(--dkgreen);animation:correctPop .3s ease}
.mcq-btn.no{border-color:var(--red);background:#FFF5F5;color:var(--red);animation:shake .35s ease}
.mcq-btn.reveal{border-color:var(--green);background:#F0FFF4;color:var(--dkgreen)}
.mcq-btn:disabled{cursor:not-allowed}
/* 숫자 입력 패드 */
.numpad-wrap{background:#fff;border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.numpad-display{font-family:Jua,sans-serif;font-size:2rem;color:var(--navy);text-align:center;padding:10px;background:var(--sky);border-radius:10px;margin-bottom:10px;min-height:52px;letter-spacing:2px}
.numpad-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px}
.numpad-btn{padding:var(--numpad-btn-pad,12px 4px);border:2px solid var(--border);border-radius:10px;background:#fff;font-family:Jua,sans-serif;font-size:var(--numpad-btn-size,1.25rem);color:var(--navy);cursor:pointer;transition:all .15s;text-align:center}
.numpad-btn:active{transform:scale(.91);background:var(--orange);color:#fff;border-color:var(--orange)}
.numpad-actions{display:flex;gap:8px}
.numpad-del{flex:1;padding:11px;border:2px solid var(--border);border-radius:10px;background:#FFF5F5;font-family:Jua,sans-serif;font-size:.95rem;color:var(--red);cursor:pointer}
.numpad-submit{flex:2;padding:11px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--mint),var(--teal));color:#fff;font-family:Jua,sans-serif;font-size:1rem;cursor:pointer}
/* 분수 입력 패드 */
.fracpad-wrap{background:#fff;border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.fracpad-row{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:10px}
.fracpad-field{text-align:center}
.fracpad-label{font-size:.68rem;color:var(--muted);margin-bottom:3px;font-family:Jua,sans-serif}
.fracpad-val{font-family:Jua,sans-serif;font-size:1.6rem;color:var(--navy);background:var(--sky);border-radius:10px;padding:8px 18px;min-width:60px;text-align:center}
.fracpad-line{width:2px;height:36px;background:var(--navy);margin-top:20px}
.fracpad-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px}
.fracpad-focus-lbl{font-size:.72rem;color:var(--muted);text-align:center;margin-bottom:4px;font-family:Jua,sans-serif}
.fb-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:200;pointer-events:none;opacity:0;transition:opacity .2s}
.fb-overlay.show{opacity:1}
.fb-bubble{font-size:4rem;animation:fbPop .5s ease}

/* ── 탐험가 캐릭터 이펙트 | @CSS:quiz.js ── */
#mascot-wrap{
  position:fixed; bottom:18px; right:14px;
  width:72px; height:72px;
  pointer-events:none; z-index:199;
  transition:opacity .4s, transform .4s;
  opacity:0; transform:translateY(20px) scale(.85);
}
#mascot-wrap.show{ opacity:1; transform:translateY(0) scale(1); }
#mascot-img{
  width:72px; height:72px;
  object-fit:contain;
  transition: filter .3s, transform .3s;
}

/* 상태별 필터 */
#mascot-wrap.state-idle   #mascot-img{ filter:brightness(.85) saturate(.6); }
#mascot-wrap.state-wait   #mascot-img{ filter:brightness(.9) saturate(.8); }
#mascot-wrap.state-correct #mascot-img{ filter:brightness(1.2) saturate(1.4); }
#mascot-wrap.state-wrong  #mascot-img{ filter:brightness(.8) hue-rotate(180deg) saturate(.7); }
#mascot-wrap.state-hint   #mascot-img{ filter:brightness(1.05) hue-rotate(20deg); transform:rotate(-10deg); }
#mascot-wrap.state-result-pass  #mascot-img{ filter:brightness(1.25) saturate(1.5) drop-shadow(0 0 6px #FFD700); }
#mascot-wrap.state-result-fail  #mascot-img{ filter:brightness(.75) saturate(.5) hue-rotate(200deg); }

/* 애니메이션 */
@keyframes mc-jump  { 0%,100%{transform:translateY(0)} 35%{transform:translateY(-16px)} 65%{transform:translateY(-8px)} }
@keyframes mc-shake { 0%,100%{transform:rotate(0)}     25%{transform:rotate(-10deg)}    75%{transform:rotate(10deg)} }
@keyframes mc-pulse { 0%,100%{transform:scale(1)}       50%{transform:scale(1.1)} }
@keyframes mc-tilt  { 0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(-14deg)} }
@keyframes mc-bob   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-5px)} }
@keyframes mc-droop { 0%,100%{transform:translateY(0)}  50%{transform:translateY(4px)} }

#mascot-wrap.state-correct #mascot-img{ animation: mc-jump  .65s ease 1; }
#mascot-wrap.state-wrong   #mascot-img{ animation: mc-shake .5s  ease 2; }
#mascot-wrap.state-hint    #mascot-img{ animation: mc-tilt  .8s  ease infinite; }
#mascot-wrap.state-result-pass #mascot-img{ animation: mc-pulse 1s ease infinite; }
#mascot-wrap.state-result-fail #mascot-img{ animation: mc-droop 1.2s ease infinite; }
#mascot-wrap.state-wait    #mascot-img{ animation: mc-bob   2.2s ease infinite; }

/* 오버레이 뱃지 (이모지) */
#mascot-badge{
  position:absolute; top:-10px; right:-8px;
  font-size:20px; line-height:1;
  transition: opacity .3s, transform .3s;
  opacity:0; transform:scale(.5);
}
#mascot-badge.show{ opacity:1; transform:scale(1); }

/* ── RESULT | @CSS:quiz.js ── */
#screenResult{background:linear-gradient(160deg,#FFF5EE,#E8F4FD);padding-bottom:80px}
.res-hdr{padding:22px 20px 0;text-align:center}
.res-emoji{font-size:4.5rem;display:block;animation:bounce .6s ease}
.res-title{font-family:Jua,sans-serif;font-size:1.6rem;color:var(--navy);margin-top:8px}
.res-sub{color:var(--muted);font-size:.85rem;margin-top:4px}

/* 결과 캐릭터 애니메이션 */
@keyframes rc-celebrate{ 0%{transform:translateY(0) scale(1)} 20%{transform:translateY(-18px) scale(1.08)} 40%{transform:translateY(-8px) scale(1.04)} 60%{transform:translateY(-14px) scale(1.06)} 80%{transform:translateY(-4px) scale(1.02)} 100%{transform:translateY(0) scale(1)} }
@keyframes rc-perfect  { 0%,100%{transform:scale(1) rotate(0deg)} 25%{transform:scale(1.1) rotate(-3deg)} 75%{transform:scale(1.1) rotate(3deg)} }
@keyframes rc-droop    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes rc-wobble   { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-6deg)} 70%{transform:rotate(6deg)} }
@keyframes rc-spin-in  { 0%{transform:rotate(-15deg) scale(.7);opacity:0} 100%{transform:rotate(0) scale(1);opacity:1} }
@keyframes badge-pop   { 0%{opacity:0;transform:scale(.3) rotate(-20deg)} 60%{transform:scale(1.2) rotate(5deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }

#resCharImg.rc-celebrate { animation: rc-celebrate .8s ease forwards; }
#resCharImg.rc-perfect   { animation: rc-perfect 1.2s ease infinite; }
#resCharImg.rc-droop     { animation: rc-droop 1.4s ease infinite; }
#resCharImg.rc-wobble    { animation: rc-wobble 1s ease infinite; }
#resCharImg.rc-spin-in   { animation: rc-spin-in .5s ease forwards; }
#resCharBadge.badge-pop,
#resCharBadge2.badge-pop { animation: badge-pop .45s cubic-bezier(.36,.07,.19,.97) forwards; }
.res-score-card{margin:18px 20px 14px;background:linear-gradient(135deg,var(--orange),#FF4B00);border-radius:20px;padding:22px;color:#fff;text-align:center;box-shadow:0 6px 24px rgba(255,107,53,.4)}
.res-score-big{font-family:Jua,sans-serif;font-size:3.2rem;display:block;line-height:1}
.res-score-lbl{font-size:.8rem;opacity:.85;margin-top:5px}
.res-stats{display:flex;justify-content:center;gap:22px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.25)}
.res-stat{text-align:center}
.res-stat .sv{font-family:Jua,sans-serif;font-size:1.3rem}
.res-stat .sl{font-size:.7rem;opacity:.8;margin-top:2px}
.res-rec-row{display:flex;gap:9px;margin:0 20px 14px}
.res-rec{flex:1;background:#fff;border-radius:13px;padding:13px;text-align:center;box-shadow:var(--shadow)}
.res-rec .rv{font-family:Jua,sans-serif;font-size:1.15rem;color:var(--orange)}
.res-rec .rl{font-size:.68rem;color:var(--muted);margin-top:2px}
.best-badge{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 20px 14px;background:linear-gradient(135deg,var(--sun),#FFA500);border-radius:12px;padding:10px;color:#fff;font-family:Jua,sans-serif;font-size:.92rem;box-shadow:0 3px 12px rgba(255,169,0,.3)}
.fail-badge{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 20px 14px;background:linear-gradient(135deg,var(--red),#CC0020);border-radius:12px;padding:10px;color:#fff;font-family:Jua,sans-serif;font-size:.88rem}
.wrong-section{margin:0 20px}
.wrong-title{font-family:Jua,sans-serif;font-size:.95rem;color:var(--navy);margin-bottom:9px;display:flex;align-items:center;gap:5px}
.wrong-item{background:#fff;border-radius:13px;padding:12px 14px;margin-bottom:7px;border-left:4px solid var(--red);box-shadow:var(--shadow)}
.wrong-item .wi-q{font-family:Jua,sans-serif;font-size:.95rem;color:var(--navy);margin-bottom:3px}
.wrong-item .wi-a{font-size:.8rem;color:var(--muted)}
.wrong-item .wi-a span{color:var(--dkgreen);font-weight:700}
.res-actions{display:flex;gap:9px;padding:14px 20px 0}
.coin-reward{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 20px 10px;background:linear-gradient(135deg,var(--gold),#E08000);border-radius:12px;padding:10px;color:#fff;font-family:Jua,sans-serif;font-size:.88rem;box-shadow:0 3px 10px rgba(255,184,0,.3)}

/* ── RANKING | @CSS:quiz.js ── */
#screenRanking{background:linear-gradient(160deg,#1A1F4E 0%,#2D1B69 40%,#4A1585 100%);padding-bottom:80px;min-height:100vh}
.rank-hdr{padding:16px 20px 0;display:flex;align-items:center;gap:10px}
.rank-title-area{flex:1;text-align:center}
.rank-title-area h2{font-family:Jua,sans-serif;font-size:1.4rem;color:#fff}
.rank-title-area p{font-size:.75rem;color:rgba(255,255,255,.6);margin-top:2px}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;height:200px;padding:0 20px}
.pd-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;max-width:110px}
.pd-avatar{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.9rem;border:3px solid rgba(255,255,255,.5);box-shadow:0 4px 14px rgba(0,0,0,.3);position:relative;background:rgba(255,255,255,.15);overflow:hidden}
.pd-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pd-crown{position:absolute;top:-22px;font-size:1.4rem}
.pd-name{font-family:Jua,sans-serif;font-size:.75rem;color:#fff;text-align:center;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-sc{font-family:Jua,sans-serif;font-size:.8rem;color:var(--sun)}
.pd-time{font-size:.6rem;color:rgba(255,255,255,.5)}
.pd-base{border-radius:14px 14px 0 0;width:80px;display:flex;align-items:center;justify-content:center;font-family:Jua,sans-serif;font-size:1.4rem;color:#fff}
.pd-1 .pd-base{height:100px;background:linear-gradient(180deg,#FFB800,#E08000);box-shadow:0 -4px 20px rgba(255,184,0,.4)}
.pd-2 .pd-base{height:76px;background:linear-gradient(180deg,#C0C8D8,#8090A8)}
.pd-3 .pd-base{height:58px;background:linear-gradient(180deg,#E8A060,#C07040)}
.rank-list{padding:0 20px}
.rank-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border-radius:13px;padding:11px 14px;margin-bottom:7px;border:1px solid rgba(255,255,255,.12)}
.rank-item.me{background:rgba(255,107,53,.2);border-color:var(--orange)}
.rk-num{font-family:Jua,sans-serif;font-size:.95rem;color:rgba(255,255,255,.5);width:26px;text-align:center}
.rk-av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;overflow:hidden}
.rk-av img{width:100%;height:100%;object-fit:cover}
.rk-info{flex:1}
.rk-name{font-family:Jua,sans-serif;font-size:.9rem;color:#fff}
.rk-det{font-size:.68rem;color:rgba(255,255,255,.5)}
.rk-sc{font-family:Jua,sans-serif;font-size:1.05rem;color:var(--sun)}
.rank-back-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ── WEEKLY RANK SCREEN | @CSS:quiz.js ── */
#screenWeeklyRank{min-height:100%}



/* === mypage.js === */
/* ── MYPAGE | @CSS:mypage.js ── */
#screenMypage{background:linear-gradient(160deg,#FFF5EE,#E8F4FD);padding-bottom:80px}
.mp-hdr{padding:20px 20px 14px;text-align:center}
.mp-avatar{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#FFF5EE,#FFE0D0);border:3px solid var(--orange);display:flex;align-items:center;justify-content:center;font-size:3.2rem;margin:0 auto 8px;box-shadow:0 4px 16px rgba(255,107,53,.2);overflow:hidden;cursor:pointer}
.mp-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mp-name{font-family:Jua,sans-serif;font-size:1.2rem;color:var(--navy)}
.mp-school{font-size:.8rem;color:var(--muted);margin-top:2px}
.mp-xp-bar{margin:12px 20px 6px;height:10px;background:var(--border);border-radius:5px;overflow:hidden}
.mp-exp-fill{height:100%;background:linear-gradient(90deg,var(--orange),#FF4B00);transition:width .8s}
.mp-lv-row{display:flex;justify-content:space-between;padding:0 20px;font-size:.75rem;color:var(--muted);font-family:Jua,sans-serif;margin-bottom:14px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 20px;margin-bottom:16px}
.stat-box{background:#fff;border-radius:13px;padding:12px 8px;text-align:center;box-shadow:var(--shadow)}
.stat-box .sv{font-family:Jua,sans-serif;font-size:1.1rem;color:var(--orange)}
.stat-box .sl{font-size:.62rem;color:var(--muted);margin-top:3px}
/* 학습 통계 차트 */
.chart-section{margin:0 20px 16px}
.chart-title{font-family:Jua,sans-serif;font-size:.9rem;color:var(--navy);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.chart-tabs{display:flex;gap:5px;margin-bottom:10px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.chart-tabs::-webkit-scrollbar{display:none}
.chart-tab{flex-shrink:0;padding:5px 14px;border-radius:20px;border:none;font-family:Jua,sans-serif;font-size:.78rem;cursor:pointer;transition:all .2s;background:var(--sky);color:var(--muted)}
.chart-tab.active{background:var(--orange);color:#fff}
.chart-canvas-wrap{background:#fff;border-radius:14px;padding:14px;box-shadow:var(--shadow)}
/* 업적 */
.ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 20px;margin-bottom:16px}
.ach-item{border-radius:12px;padding:10px 4px;text-align:center;border:2px solid var(--border);background:#fff;box-shadow:var(--shadow);opacity:.45;transition:all .2s}
.ach-item.earned{border-color:var(--gold);background:linear-gradient(135deg,#FFFBEE,#FFF5CC);opacity:1;box-shadow:0 3px 12px rgba(255,184,0,.25)}
.ai-ic{display:block;font-size:1.4rem;margin-bottom:3px}
.ai-nm{font-size:.58rem;color:var(--text);font-family:Jua,sans-serif;line-height:1.2}

/* ── SHOP SCREEN | @CSS:mypage.js ── */
#screenShop{background:linear-gradient(160deg,#FFF8EE,#FFF0F5);padding-bottom:80px}
.shop-hdr{padding:14px 20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.shop-coin-badge{display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--gold),#E08000);color:#fff;padding:8px 16px;border-radius:20px;font-family:Jua,sans-serif;font-size:.9rem;box-shadow:0 3px 10px rgba(255,184,0,.35)}
.shop-section-title{font-family:Jua,sans-serif;font-size:.92rem;color:var(--navy);padding:0 20px;margin:14px 0 10px;display:flex;align-items:center;gap:6px}
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 20px;margin-bottom:14px}
.shop-item{background:#fff;border-radius:16px;padding:14px;text-align:center;box-shadow:var(--shadow);border:2px solid var(--border);position:relative;cursor:pointer;transition:all .2s}
.shop-item:active{transform:scale(.97)}
.shop-item.owned{border-color:var(--green);background:linear-gradient(135deg,#F0FFF8,#E0FFF0)}
.shop-item.equipped{border-color:var(--gold);background:linear-gradient(135deg,#FFFBEE,#FFF5CC)}
.shop-item-icon{font-size:2.4rem;margin-bottom:6px;display:block}
.shop-item-name{font-family:Jua,sans-serif;font-size:.85rem;color:var(--navy);margin-bottom:3px}
.shop-item-price{font-family:Jua,sans-serif;font-size:.82rem;color:var(--gold)}
.shop-item-badge{position:absolute;top:-6px;right:-6px;background:var(--orange);color:#fff;font-size:.6rem;font-family:Jua,sans-serif;padding:2px 7px;border-radius:20px}



/* === system.js === */
/* ── 레벨업 오버레이 | @CSS:system.js ── */
#levelUpOverlay{
  position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(0,0,0,.75);pointer-events:none;opacity:0;
  transition:opacity .3s;
}
#levelUpOverlay.show{opacity:1;pointer-events:all;}
.lv-up-card{
  background:linear-gradient(135deg,#6C3FC8,#FF6B9D);
  border-radius:28px;padding:36px 48px;text-align:center;
  animation:lvBounce .5s cubic-bezier(.36,.07,.19,.97);
  box-shadow:0 16px 60px rgba(108,63,200,.5);
}
@keyframes lvBounce{0%{transform:scale(.3) rotate(-10deg);opacity:0}60%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes chestPop{0%{transform:scale(.5) rotate(-15deg);opacity:0}60%{transform:scale(1.2) rotate(5deg)}80%{transform:scale(.95)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes wcCorrect{0%{background:rgba(34,197,94,.3)}100%{background:rgba(255,255,255,.12)}}
.wc-choice{background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.2);border-radius:14px;padding:14px 12px;color:#fff;font-family:Jua,sans-serif;font-size:.95rem;cursor:pointer;text-align:center;transition:all .15s;backdrop-filter:blur(4px)}
.wc-choice:active{transform:scale(.96)}
.wc-choice.correct{background:rgba(34,197,94,.35);border-color:#22C55E}
.wc-choice.wrong{background:rgba(239,68,68,.3);border-color:#EF4444}
.lv-up-stars{font-size:2.8rem;margin-bottom:8px;animation:starSpin 1s ease infinite alternate;}
@keyframes starSpin{from{transform:rotate(-15deg) scale(1)}to{transform:rotate(15deg) scale(1.15)}}
.lv-up-label{font-family:Jua;font-size:1rem;color:rgba(255,255,255,.8);margin-bottom:4px}
.lv-up-lv{font-family:'Jua';font-size:3rem;color:#FFD93D;text-shadow:0 0 20px rgba(255,217,61,.8)}
.lv-up-name{font-family:'Jua';font-size:1.2rem;color:#fff;margin-top:4px}
.lv-up-confetti{position:absolute;pointer-events:none;}

/* ── 업적 획득 팝업 | @CSS:system.js ── */
#achPopup{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(30px);
  z-index:9000;background:linear-gradient(135deg,#FFB800,#FF6B35);
  border-radius:20px;padding:12px 20px;display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 30px rgba(255,107,53,.4);
  opacity:0;transition:all .4s;pointer-events:none;min-width:220px;
}
#achPopup.show{opacity:1;transform:translateX(-50%) translateY(0);}
.ach-pop-icon{font-size:2rem;}
.ach-pop-txt{color:#fff;font-family:'Jua';}
.ach-pop-lbl{font-size:.7rem;opacity:.85}
.ach-pop-name{font-size:1rem;}

/* ── 오답노트 탭 | @CSS:system.js ── */
.wn-tab{
  border:2px solid var(--border);background:var(--sky);
  border-radius:20px;padding:5px 12px;font-family:'Jua';font-size:.75rem;
  cursor:pointer;color:var(--text);transition:all .2s;white-space:nowrap;
}
.wn-tab.active{border-color:var(--violet);background:var(--violet);color:#fff;}

/* ── 오답노트 아이템 | @CSS:system.js ── */
.wn-item{
  background:var(--cloud);border-radius:14px;padding:14px 16px;
  margin-bottom:10px;border-left:4px solid var(--red);
  box-shadow:var(--shadow);
}
.wn-q{font-family:'Jua';font-size:.88rem;color:var(--navy);margin-bottom:6px;line-height:1.4}
.wn-a{font-size:.78rem;color:var(--muted)}
.wn-a span{color:var(--green);font-weight:700}
.wn-date{font-size:.65rem;color:var(--muted);margin-top:4px}
.wn-type-chip{
  display:inline-block;font-size:.6rem;padding:2px 7px;border-radius:10px;
  background:var(--sky);color:var(--violet);font-family:'Jua';margin-bottom:4px;
}

/* ── 목표 설정 모달 | @CSS:system.js ── */
#goalModal{
  position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;
}
#goalModal.open{display:flex;}
.goal-card{
  background:#fff;border-radius:24px;padding:28px 24px;width:320px;max-width:90vw;
  text-align:center;box-shadow:var(--shadow-lg);
}

/* ── 사운드 토글 버튼 | @CSS:system.js ── */
#soundToggle{
  position:fixed;bottom:90px;right:14px;z-index:500;
  background:rgba(255,255,255,.9);border:2px solid var(--border);
  border-radius:50%;width:40px;height:40px;font-size:1.1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
}

/* ── 일일목표 달성 배너 | @CSS:system.js ── */
#goalBanner{
  position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-100%);
  z-index:8500;background:linear-gradient(135deg,#6BCB77,#4CAF63);
  color:#fff;font-family:'Jua';padding:12px 28px;border-radius:0 0 20px 20px;
  box-shadow:0 4px 20px rgba(0,0,0,.2);transition:transform .5s cubic-bezier(.36,.07,.19,.97);
  text-align:center;font-size:.95rem;
}
#goalBanner.show{transform:translateX(-50%) translateY(0);}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--sky)}
body{font-family:'Nanum Gothic',sans-serif;color:var(--text)}
.screen{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%) translateX(20px);width:100%;max-width:480px;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease;scroll-behavior:smooth;z-index:1}
.screen.active{z-index:10;opacity:1;pointer-events:auto;transform:translateX(-50%)}
.hidden{display:none!important}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border:none;border-radius:50px;font-family:Jua,sans-serif;font-size:1rem;cursor:pointer;transition:all .18s;user-select:none}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--orange),#FF4B00);color:#fff;box-shadow:0 4px 15px rgba(255,107,53,.4)}
.btn-mint{background:linear-gradient(135deg,var(--mint),var(--teal));color:#fff;box-shadow:0 4px 15px rgba(78,205,196,.4)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#E08000);color:#fff;box-shadow:0 4px 15px rgba(255,184,0,.4)}
.btn-ghost{background:rgba(255,255,255,.7);border:2px solid var(--border);color:var(--text)}
.btn-lg{padding:18px 32px;font-size:1.15rem}
.btn-block{width:100%}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--navy);color:#fff;padding:12px 24px;border-radius:30px;font-size:.88rem;font-family:Jua,sans-serif;z-index:9999;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:60px;background:#fff;border-top:1px solid var(--border);display:flex;z-index:50;box-shadow:0 -2px 20px rgba(0,0,0,.06)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:all .2s;color:var(--muted);font-size:.58rem;font-family:Jua,sans-serif}
.nav-item .nav-icon{font-size:1.2rem;transition:transform .2s}
.nav-item .nav-icon{font-size:1.4rem;transition:transform .2s}
.nav-item.active{color:var(--orange)}
.nav-item.active .nav-icon{transform:scale(1.15)}

/* ── 학부모 리포트 | @CSS:system.js ── */
.report-section{background:#fff;border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.report-title{font-family:'Jua';font-size:.95rem;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.report-stat-row{display:flex;gap:10px;margin-bottom:10px}
.report-stat{flex:1;background:var(--sky);border-radius:12px;padding:10px;text-align:center}
.report-stat-val{font-family:'Jua';font-size:1.1rem;color:var(--violet)}
.report-stat-lbl{font-size:.65rem;color:var(--muted);margin-top:2px}
.subject-bar{margin-bottom:8px}
.subject-bar-label{display:flex;justify-content:space-between;font-size:.75rem;margin-bottom:3px}
.subject-bar-track{height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden}
.subject-bar-fill{height:100%;border-radius:4px;transition:width .6s ease}
.wrong-item{background:var(--sky);border-radius:10px;padding:10px;margin-bottom:8px}
.wrong-q{font-size:.8rem;color:var(--text);margin-bottom:4px}
.wrong-ans{font-size:.72rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px}
.cal-dot{width:100%;aspect-ratio:1;border-radius:4px;background:#eee}
.cal-dot.s1{background:rgba(108,92,231,.3)}.cal-dot.s2{background:rgba(108,92,231,.6)}.cal-dot.s3{background:var(--violet)}

/* ══ 보물상자 등급별 이펙트 ══ */
@keyframes chestShake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-8px) rotate(-8deg)}30%{transform:translateX(8px) rotate(8deg)}45%{transform:translateX(-6px) rotate(-5deg)}60%{transform:translateX(6px) rotate(5deg)}75%{transform:translateX(-3px) rotate(-2deg)}}
@keyframes chestExplode{0%{transform:scale(1)}30%{transform:scale(1.4) rotate(-10deg)}60%{transform:scale(0.8) rotate(15deg)}80%{transform:scale(1.2)}100%{transform:scale(1) rotate(0)}}
@keyframes legendPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.6)}50%{box-shadow:0 0 40px 20px rgba(251,191,36,.0)}}
@keyframes rainbowBg{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes epicGlow{0%,100%{filter:drop-shadow(0 0 8px #A855F7)}50%{filter:drop-shadow(0 0 24px #EC4899) drop-shadow(0 0 48px #6366F1)}}
@keyframes legendFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.08)}}
@keyframes starBurst{0%{transform:scale(0) rotate(0deg);opacity:1}100%{transform:scale(2.5) rotate(180deg);opacity:0}}
@keyframes particleFly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}
@keyframes chestRayRotate{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
.chest-rays{position:absolute;top:50%;left:50%;width:300px;height:300px;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s}
.chest-ray{position:absolute;top:50%;left:50%;width:150px;height:6px;transform-origin:0 50%;border-radius:3px}
#chestModal .modal-box{position:relative;overflow:hidden;transition:background .6s, box-shadow .6s}
.chest-particle-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:24px 24px 0 0}




/* === battle.js === */
/* ── 대결 카드 | @CSS:battle.js ── */
.battle-card{background:#fff;border-radius:16px;padding:14px 16px;border:2px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.battle-card.pending-in{border-color:#F59E0B;background:#FFFBEB}
.battle-card.playing{border-color:var(--violet);background:#F5F3FF}
.battle-card.done-win{border-color:#10B981;background:#ECFDF5}
.battle-card.done-lose{border-color:#9CA3AF;background:#F9FAFB}
.battle-card.done-draw{border-color:#6366F1;background:#EEF2FF}
.battle-vs{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.battle-player{flex:1;text-align:center}
.battle-player-name{font-family:Jua,sans-serif;font-size:.85rem;color:var(--navy);margin-top:4px}
.battle-player-score{font-size:1.1rem;font-weight:700;color:var(--violet)}
.battle-subj-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.72rem;font-family:Jua,sans-serif;color:#fff;margin-bottom:8px}
.bq-choice{width:100%;padding:14px 16px;background:#fff;border:2px solid var(--border);border-radius:14px;font-family:Jua,sans-serif;font-size:.95rem;color:var(--navy);cursor:pointer;text-align:left;transition:all .15s}
.bq-choice:hover{border-color:var(--violet);background:#F5F3FF}
.bq-choice.correct{border-color:#10B981;background:#ECFDF5;color:#065F46}
.bq-choice.wrong{border-color:#EF4444;background:#FEF2F2;color:#991B1B}

/* ── 전달사항 카드 ─────────────────────────────── */
.notice-strip{
  margin:0 14px 0;
  border-radius:18px;
  box-shadow:0 4px 16px rgba(108,63,200,.18);
  border:none;
  background:linear-gradient(135deg,#7C3AED 0%,#A855F7 100%);
  position:relative;
  display:block;
  flex-shrink:0;
  box-sizing:border-box;
  /* 숨김: visibility + height 조합 */
  visibility:hidden;
  height:0;
  overflow:hidden;
  margin-bottom:0;
}
.notice-strip.visible{
  visibility:visible;
  height:auto;
  overflow:visible;
  margin-bottom:12px;
}
.notice-strip::before{
  content:'📣';
  position:absolute;right:-4px;top:-8px;
  font-size:4.5rem;opacity:.10;pointer-events:none;
}
.notice-strip-header{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px 0;
  font-family:Jua,sans-serif;font-size:.82rem;color:rgba(255,255,255,.85);
  letter-spacing:.01em;
}
.notice-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:#FF4757;color:#fff;
  font-size:.6rem;font-family:'Nanum Gothic',sans-serif;font-weight:900;
  border-radius:20px;padding:1px 7px;min-width:20px;
  vertical-align:middle;margin-left:2px;
  box-shadow:0 0 0 2px rgba(255,255,255,.3);
  animation:noticePulse 1.8s infinite;
}
@keyframes noticePulse{
  0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.3);}
  50%{box-shadow:0 0 0 5px rgba(255,71,87,.0);}
}
.notice-new-dot{
  width:8px;height:8px;border-radius:50%;
  background:#FF4757;display:inline-block;margin-left:4px;
  box-shadow:0 0 0 2px rgba(255,255,255,.5);
  animation:noticePulse 1.8s infinite;
}
.notice-latest{
  padding:9px 14px 5px;
  font-size:.88rem;color:#fff;line-height:1.55;
  white-space:pre-wrap;word-break:break-all;
  font-family:'Nanum Gothic',sans-serif;font-weight:400;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.notice-latest.unread{
  font-weight:700;
}
.notice-meta{
  padding:0 14px 8px;
  font-size:.66rem;color:rgba(255,255,255,.65);
  display:flex;align-items:center;gap:8px;
}
.notice-actions{
  display:flex;gap:7px;padding:4px 14px 12px;
}
.notice-btn{
  flex:1;padding:8px 0;border:none;border-radius:20px;
  font-family:Jua,sans-serif;font-size:.78rem;cursor:pointer;
  transition:opacity .15s;
}
.notice-btn:active{opacity:.8;}
.notice-btn-reply{
  background:rgba(255,255,255,.22);color:#fff;
  border:1px solid rgba(255,255,255,.35);
}
.notice-btn-more{
  background:#fff;color:var(--violet);
}

/* 전달사항 모달 */
#modalNotice{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:950;
  align-items:flex-end;justify-content:center;
}
#modalNotice.open{ display:flex; }
.notice-modal-box{
  background:#fff;border-radius:24px 24px 0 0;
  width:100%;max-width:480px;max-height:85vh;
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.notice-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 10px;border-bottom:1px solid #f0f0f0;
}
.notice-modal-title{
  font-family:Jua,sans-serif;font-size:1rem;color:var(--navy);
}
.notice-list-wrap{
  overflow-y:auto;flex:1;padding:10px 0;
}
.notice-item{
  padding:13px 18px;border-bottom:1px solid #f5f5f5;
  cursor:pointer;transition:background .15s;
}
.notice-item:hover{ background:#faf8ff; }
.notice-item.unread{
  background:#faf6ff;
  border-left:3px solid var(--violet);
  padding-left:15px;
}
.notice-item-top{
  display:flex;align-items:center;gap:6px;margin-bottom:5px;
}
.notice-item-tag{
  font-size:.6rem;padding:2px 7px;border-radius:10px;
  background:rgba(108,63,200,.12);color:var(--violet);
  font-family:'Nanum Gothic',sans-serif;font-weight:700;
}
.notice-item-tag.personal{
  background:rgba(231,76,60,.12);color:#E74C3C;
}
.notice-new-badge{
  font-size:.58rem;background:#FF4757;color:#fff;
  border-radius:8px;padding:1px 6px;font-weight:900;
  font-family:'Nanum Gothic',sans-serif;
}
.notice-item-msg{
  font-size:.87rem;color:#333;line-height:1.55;word-break:break-all;
}
.notice-item.unread .notice-item-msg{ font-weight:700;color:var(--navy); }
.notice-item-date{
  font-size:.64rem;color:var(--muted);margin-top:5px;
}
.notice-item-reply{
  margin-top:8px;padding:8px 11px;
  background:#f3eeff;border-radius:10px;
  font-size:.78rem;color:#555;line-height:1.4;
  border-left:2px solid var(--violet);
}
.notice-item-reply-label{
  font-size:.62rem;color:var(--violet);font-weight:700;margin-bottom:3px;
}
.notice-reply-form{
  padding:10px 14px 12px;border-top:1px solid #f0f0f0;
  display:flex;gap:8px;
}
.notice-reply-input{
  flex:1;border:1.5px solid #e0d6ff;border-radius:20px;
  padding:8px 14px;font-size:.82rem;font-family:'Nanum Gothic',sans-serif;
  outline:none;
}
.notice-reply-input:focus{ border-color:var(--violet); }
.notice-reply-send{
  background:var(--violet);color:#fff;border:none;
  border-radius:20px;padding:8px 16px;
  font-family:Jua,sans-serif;font-size:.8rem;cursor:pointer;
  white-space:nowrap;
}



/* ── 타이머 숫자 흔들기 ── */
@keyframes qTimerShake {
  0%,100%{transform:scale(1)}
  25%{transform:scale(1.25) rotate(-5deg)}
  75%{transform:scale(1.25) rotate(5deg)}
}

/* ── 콤보 팝업 ── */
@keyframes comboPop {
  0%{transform:scale(.7);opacity:0}
  60%{transform:scale(1.1);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* ── 출석 도장 ── */
.stamp-day {
  flex:1;display:flex;flex-direction:column;
  align-items:center;gap:4px;
}
.stamp-day .stamp-label {
  font-size:.65rem;color:#aaa;font-family:Jua,sans-serif;
}
.stamp-day .stamp-circle {
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;border:2px solid #e8e0ff;
  background:#f9f6ff;transition:all .2s;
}
.stamp-day.stamped .stamp-circle {
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  border-color:#7c3aed;
  box-shadow:0 2px 8px rgba(124,58,237,.35);
}
.stamp-day.today .stamp-circle {
  border-color:#f97316;border-width:2.5px;
}
.stamp-day.stamped.today .stamp-circle {
  background:linear-gradient(135deg,#fb923c,#ea580c);
  border-color:#ea580c;
  box-shadow:0 2px 8px rgba(234,88,12,.35);
}
@keyframes stampPop {
  0%{transform:scale(0);opacity:0}
  70%{transform:scale(1.2);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.stamp-day.stamped .stamp-circle { animation:stampPop .4s ease; }

/* ── 학년별 1~2학년 전체 텍스트 확대 ── */
body[data-grade-group="low"] .home-greeting h2,
body[data-grade-group="low"] .sec-title,
body[data-grade-group="low"] .notice-latest,
body[data-grade-group="low"] .toast { font-size: calc(1em * var(--grade-scale, 1)); }

/* ── 컨페티 ── */
#confettiCanvas {
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:9999;
}

/* ── 만점 결과 화면 특별 배너 ── */
#perfectBanner {
  display:none;
  text-align:center;
  padding:14px 16px;
  margin:0 12px 10px;
  background:linear-gradient(135deg,#FFF9C4,#FFF3AA);
  border-radius:16px;
  border:2px solid #FFD700;
  animation:perfectBannerPop .5s ease;
}
@keyframes perfectBannerPop {
  0%{transform:scale(.85);opacity:0}
  70%{transform:scale(1.04);opacity:1}
  100%{transform:scale(1);opacity:1}
}
#perfectBanner .pb-title {
  font-family:Jua,sans-serif;font-size:1.2rem;color:#B8860B;margin-bottom:4px;
}
#perfectBanner .pb-sub {
  font-size:.82rem;color:#A07820;font-family:'Nanum Gothic',sans-serif;
}

/* ── 커리큘럼 접기/펼치기 ── */
#curriculumToggleIcon {
  display:inline-block;
  transition:transform .25s ease;
}
#curriculumSection .sec-title {
  user-select:none;
}


/* ══════════════════════════════════════════════════════════
   태블릿 레이아웃 v3
   핵심 원칙:
   1. 스플래시는 항상 전체화면 덮기 (inset:0, z-index:9999)
   2. 모든 화면이 동일한 max-width(860px) 사용 — 일관성
   3. 홈: 2컬럼 (메인 + 완전히 다른 사이드 콘텐츠)
   4. 학습: 2컬럼 (과목 목록 전체폭 활용)
   5. 퀴즈: 2컬럼 (문제 + 진행 패널)
   6. 스테이지/결과 등: 중앙 정렬, 여백 활용
   ══════════════════════════════════════════════════════════ */

/* ── 스플래시: 항상 전체화면 덮기 ── */
#screenSplash {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  z-index: 9999 !important;
  background: #b8eaf8 !important;
}
#splashContent {
  max-width: 480px;
  margin: 0 auto;
}

/* ── 공통 카드 ── */
.tablet-side-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  border: 1px solid var(--border);
}
.tablet-side-title {
  font-family: Jua, sans-serif;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 12px;
  letter-spacing: .3px;
}
.quiz-side-progress {
  background: linear-gradient(135deg, #6C3FC8, #9B59B6);
  color: #fff;
  border-radius: 16px;
  padding: 16px;
}
.quiz-side-progress .qs-label { font-family: Jua, sans-serif; font-size: .75rem; opacity: .85; margin-bottom: 4px; }
.quiz-side-progress .qs-score { font-family: Jua, sans-serif; font-size: 2rem; font-weight: 900; }
.quiz-side-progress .qs-unit  { font-size: .8rem; opacity: .8; }

@media (min-width: 600px) {

  /* ══ 1. 모든 screen 동일 max-width ══ */
  .screen {
    max-width: 860px !important;
  }
  .screen.active {
    transform: translateX(-50%) !important;
  }
  .bottom-nav {
    max-width: 860px !important;
  }
  .modal-box {
    max-width: 580px !important;
  }
  .toast {
    max-width: 420px;
  }

  /* ══ 2. 인증 화면 ══ */
  #screenAuth {
    justify-content: center;
    align-items: center;
  }
  #screenAuth .auth-card {
    max-width: 440px;
  }

  /* ══ 3. 홈화면: 좌(메인) + 우(사이드) ══ */
  #screenHome {
    display: grid !important;
    grid-template-columns: 1fr 270px !important;
    align-items: start;
    padding: 0 0 80px !important;
    overflow-y: auto;
    max-height: 100vh;
  }
  #screenHome > *:not(#tabletSidebar) {
    grid-column: 1;
    min-width: 0;
    padding-left: 4px;
  }
  #tabletSidebar {
    grid-column: 2 !important;
    grid-row: 1 / 999 !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 80px 8px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    align-self: start;
    background: linear-gradient(160deg,#FFF5EE,#E8F4FD 50%,#F0FFF4);
    z-index: 5;
  }

  /* ══ 4. 학습화면: 좌(메인) + 우(사이드) ══ */
  #screenStudy {
    display: grid !important;
    grid-template-columns: 1fr 260px !important;
    align-items: start;
    padding: 0 0 80px !important;
    overflow-y: auto;
    max-height: 100vh;
  }
  #screenStudy > *:not(#studyTabletSidebar) {
    grid-column: 1;
    min-width: 0;
  }
  /* 앱 전환 탭은 전체폭 */
  #screenStudy .app-switch-bar {
    grid-column: 1 / 3 !important;
  }
  #studyTabletSidebar {
    grid-column: 2 !important;
    grid-row: 2 / 999 !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 80px 8px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    align-self: start;
    background: linear-gradient(160deg,#FFF5EE,#E8F4FD 50%,#F0FFF4);
    z-index: 5;
  }
  .app-switch-bar {
    padding: 14px 16px 8px !important;
  }
  /* 수학 카드 3열 */
  .hanja-grade-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 0 12px 14px !important;
  }
  /* 국어 카드 2열 */
  .korean-type-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 0 12px 14px !important;
  }
  /* 추천 그리드 4열 (사이드바 있으므로) */
  .rec-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  /* 수학 카드 (num_cards) 3열 배치 */
  #numTypeCards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
    padding: 0 12px 14px !important;
  }

  /* ══ 5. 퀴즈화면: 좌(문제) + 우(진행패널) ══ */
  #screenQuiz {
    display: grid !important;
    grid-template-columns: 1fr 210px !important;
    align-items: start;
    overflow-y: auto;
    max-height: 100vh;
  }
  /* 헤더/타이머는 전체폭 */
  #screenQuiz .quiz-hdr,
  #screenQuiz #qTimerWrap {
    grid-column: 1 / 3 !important;
  }
  /* 나머지는 col1 */
  #screenQuiz > *:not(#quizTabletPanel):not(.fb-overlay):not(#mascot-wrap) {
    grid-column: 1;
    min-width: 0;
  }
  /* 오버레이/마스코트 전체폭 */
  #screenQuiz .fb-overlay,
  #screenQuiz #mascot-wrap {
    grid-column: 1 / 3 !important;
  }
  /* 사이드 패널 */
  #quizTabletPanel {
    grid-column: 2 !important;
    grid-row: 3 / 999 !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 8px 14px 8px 6px;
    position: sticky;
    top: 0;
    align-self: start;
  }
  /* 퀴즈 내용 패딩 */
  .quiz-body { padding: 0 6px 0 14px !important; }
  #hintBar    { padding: 0 6px 6px 14px !important; }
  #comboFX    { padding: 2px 6px 2px 14px !important; }

  /* ══ 6. 스테이지 — 중앙 정렬로 넓게 ══ */
  #screenStage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
  }
  .stage-hdr {
    width: 100%;
    padding: 16px 28px !important;
    box-sizing: border-box;
  }
  .stage-map {
    width: 100%;
    max-width: 700px;
    padding: 10px 28px !important;
  }

  /* ══ 7. 결과화면 ══ */
  #screenResult {
    padding: 0 60px 80px !important;
  }

  /* ══ 8. 마이페이지 / 랭킹 ══ */
  #screenMypage,
  #screenRanking,
  #screenWrongNote,
  #screenParentReport {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* ══ 9. 배틀 / WC — 중앙 고정 ══ */
  #screenBattle, #screenBattleQuiz, #screenBattleResult {
    max-width: 640px !important;
  }
  #screenWC {
    max-width: 620px !important;
  }

  /* ══ 10. 하단 빈 공간 방지 ══ */
  #screenHome, #screenStudy, #screenQuiz {
    min-height: 100vh;
  }
}

  /* ══ 도전화면: 좌(메인) + 우(사이드) ══ */
  #screenChallenge {
    display: grid !important;
    grid-template-columns: 1fr 260px !important;
    align-items: start;
    padding-bottom: 80px !important;
    overflow-y: auto;
    max-height: 100vh;
  }
  /* 헤더 전체폭 */
  #screenChallenge > div:first-child {
    grid-column: 1 / 3 !important;
  }
  /* challengeLayout은 contents로 투명하게 - 자식들이 grid item */
  #challengeLayout {
    display: contents !important;
  }
  #challengeLayout > * {
    grid-column: 1;
    min-width: 0;
  }
  /* challengeMainCol도 grid item으로 col1 전체 */
  #challengeMainCol {
    grid-column: 1;
    min-width: 0;
    overflow: hidden;
    display: contents !important;
  }
  /* 사이드바 */
  #challengeTabletSidebar {
    grid-column: 2 !important;
    grid-row: 2 / 999 !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 80px 8px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    align-self: start;
    background: linear-gradient(160deg,#FFF5EE,#E8F4FD 50%,#F0FFF4);
    z-index: 5;
  }

/* ── 1024px 이상 ── */
@media (min-width: 900px) {
  .screen       { max-width: 920px !important; }
  .bottom-nav   { max-width: 920px !important; }
  #screenHome   { grid-template-columns: 1fr 290px !important; }
  #screenQuiz   { grid-template-columns: 1fr 230px !important; }
}

/* ── 말하기 연습 음성 애니메이션 ── */
@keyframes spPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.25); opacity: .65; }
}

/* 토일챌린지 과목 카드 텍스트 보호 */
.wc-subj-card{word-break:keep-all;overflow:hidden;min-width:0}
.wc-subj-card .wc-subj-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(.7rem,2.5vw,.85rem)}

/* ══ 도전화면 모바일 기본값 (600px 미만) ══ */
#screenChallenge {
  display: block !important;
  overflow-y: auto;
  padding-bottom: 80px;
}
#challengeLayout {
  display: block !important;
}
#challengeMainCol {
  display: block !important;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
#challengeTabletSidebar {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   UI/UX 개선 — 학생 친화적 레이아웃 (2026-04)
   ═══════════════════════════════════════════════════════════ */

/* ── 1. 네비 높이 변수 & 전 화면 일관 하단 패딩 ── */
:root {
  --nav-h: 60px;
  --safe-pb: calc(var(--nav-h) + 14px);
}
#screenHome,#screenStudy,#screenResult,#screenStage,
#screenMypage,#screenRanking,#screenShop,
#screenBattle,#screenBattleResult,
#screenWrongNote,#screenWeeklyRank,
#screenChallenge,#screenWC,#screenParentReport {
  padding-bottom: var(--safe-pb) !important;
}
#screenQuiz { padding-bottom: 8px !important; }

/* ── 2. 홈 화면 — 상단 영역 컴팩트 ── */
.home-header      { padding: 10px 16px 0; }
.home-greeting h2 { font-size: 1.1rem; }
.home-greeting p  { font-size: .74rem; }
.char-section     { padding: 7px 16px 4px; }
.char-display     { width: 70px; height: 70px; font-size: 2.5rem; }
.char-name        { font-size: .9rem; }
.exp-bar          { margin-top: 5px; height: 6px; }
.sec-title        { padding: 0 14px; margin-bottom: 6px; font-size: .88rem; }

/* 출석 도장 압축 */
#stampSection { margin: 0 12px 8px !important; padding: 8px 12px !important; border-radius: 14px !important; }
#stampSection > div:first-child { margin-bottom: 6px !important; }
.stamp-day .stamp-circle { width: 30px; height: 30px; font-size: .95rem; }
.stamp-day .stamp-label  { font-size: .6rem; }

/* 일일 목표 압축 */
#homeGoalBar { height: 8px !important; }

/* 가이드·후원 버튼 — 스크롤 하단으로 밀려나게 여백만 축소 */
#screenHome > div:has(button[onclick*="pdf"]) { margin-top: 4px !important; margin-bottom: 8px !important; }
#screenHome > div:has(button[onclick*="kakaopay"]) { margin-bottom: 12px !important; }
#screenHome > div:has(button[onclick*="kakaopay"]) > div:first-child { margin-bottom: 4px !important; }

/* ── 3. 앱 탭 압축 ── */
.app-switch-bar { padding: 6px 12px 2px; gap: 4px; }
.app-tab        { padding: 6px 2px; font-size: .72rem; border-radius: 16px; }

/* ── 4. 국어·일본어 — 모바일 2열 그리드 전환 (스크롤 50% 감소) ── */
#koreanTypeGrid,
#japaneseTypeGrid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 0 12px 10px !important;
}
.kor-type-card {
  padding: 11px 10px !important;
  border-radius: 14px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  min-height: 88px;
}
.kor-type-icon { width: 40px !important; height: 40px !important; font-size: 1.7rem !important; }
.kor-type-name { font-size: .95rem !important; }
.kor-type-desc { font-size: .67rem !important; line-height: 1.3 !important; }
.kor-type-deco { font-size: 2.8rem !important; right: -4px !important; top: -4px !important; }

/* 한자 그리드 압축 */
.hanja-grade-grid { padding: 0 12px 10px; gap: 8px; }
.hanja-grade-card { padding: 12px 10px; }
.hgc-desc { font-size: .67rem; }

/* ── 5. 수학 유형 카드 압축 ── */
.type-grid { gap: 5px; padding: 0 12px; margin-bottom: 12px; }
.type-card  { padding: 11px 6px; border-radius: 12px; }
.type-emoji { font-size: 1.7rem; margin-bottom: 3px; }
.type-name  { font-size: .82rem; }

/* 커리큘럼 카드 압축 */
.curr-section { padding: 0 12px 2px; }
.curr-grid    { gap: 5px; margin-bottom: 8px; }
.curr-card    { padding: 9px 8px; border-radius: 12px; }
.curr-card-name { font-size: .82rem; }
.curr-card-desc { font-size: .67rem; }

/* 취약 유형 카드 압축 */
.weak-card { padding: 10px 12px; }
.weak-label { font-size: .86rem; }

/* 내 기록 그리드 압축 */
.rec-grid { padding: 0 12px; gap: 4px; margin-bottom: 2px; }
.rec-mini { padding: 8px 6px; border-radius: 11px; }
.rec-mini .rm-t { font-size: .64rem; }
.rec-mini .rm-s { font-size: 1rem; }

/* ── 6. 스테이지 맵 컴팩트 ── */
.stage-hdr        { padding: 10px 16px; }
.stage-map        { padding: 8px 14px; }
.stage-level-block{ margin-bottom: 10px; }
.sbubble          { width: 42px; height: 42px; }
.slbl             { font-size: .55rem; width: 44px; }

/* ── 7. 결과 화면 공간 압축 ── */
.res-hdr        { padding: 14px 18px 0; }
.res-emoji      { font-size: 3.6rem; }
.res-title      { font-size: 1.4rem; }
.res-sub        { font-size: .8rem; margin-top: 3px; }
.res-score-card { margin: 12px 16px 10px; padding: 16px; border-radius: 16px; }
.res-score-big  { font-size: 2.8rem; }
.res-rec-row    { margin: 0 16px 10px; gap: 7px; }
.res-rec        { padding: 10px; }
.best-badge,.fail-badge { margin: 0 16px 10px; padding: 8px; }

/* ── 8. 연령 인식 UI — body[data-age] ── */

/* 초등: 크고 단순하게 */
body[data-age="elem"] {
  --q-text-size:    clamp(1.9rem, 7vw, 2.9rem);
  --mcq-btn-size:   1.3rem;
  --mcq-btn-pad:    19px;
  --numpad-btn-size:1.4rem;
  --numpad-btn-pad: 14px 4px;
}
body[data-age="elem"] .sbubble { width: 46px !important; height: 46px !important; }
body[data-age="elem"] .snum   { font-size: .68rem !important; }
body[data-age="elem"] .slbl   { font-size: .58rem !important; width: 48px !important; }
body[data-age="elem"] .type-emoji { font-size: 1.9rem !important; }
body[data-age="elem"] .type-name  { font-size: .88rem !important; }
body[data-age="elem"] .hgc-grade  { font-size: 1.2rem !important; }
body[data-age="elem"] .kor-type-name { font-size: 1rem !important; }
body[data-age="elem"] .app-tab { font-size: .78rem !important; padding: 7px 2px !important; }
body[data-age="elem"] .nav-item { font-size: .62rem !important; }
body[data-age="elem"] .nav-item .nav-icon { font-size: 1.5rem !important; }

/* 중학: 표준 (기본값 유지) */

/* 고등·성인: 정보 밀도 높게, 3열 그리드 */
body[data-age="high"], body[data-age="adult"] {
  --q-text-size:    clamp(1.4rem, 5vw, 2.1rem);
  --mcq-btn-size:   1.05rem;
  --mcq-btn-pad:    13px;
  --numpad-btn-size:1.1rem;
  --numpad-btn-pad: 10px 4px;
}
body[data-age="high"] #koreanTypeGrid,
body[data-age="adult"] #koreanTypeGrid,
body[data-age="high"] #japaneseTypeGrid,
body[data-age="adult"] #japaneseTypeGrid {
  grid-template-columns: 1fr 1fr 1fr !important;
}
body[data-age="high"] .kor-type-card,
body[data-age="adult"] .kor-type-card {
  padding: 9px 8px !important;
  min-height: 76px;
}
body[data-age="high"] .kor-type-icon,
body[data-age="adult"] .kor-type-icon {
  width: 34px !important; height: 34px !important; font-size: 1.4rem !important;
}
body[data-age="high"] .kor-type-name,
body[data-age="adult"] .kor-type-name { font-size: .85rem !important; }
body[data-age="high"] .kor-type-desc,
body[data-age="adult"] .kor-type-desc { font-size: .62rem !important; }
body[data-age="high"] .hanja-grade-card,
body[data-age="adult"] .hanja-grade-card { padding: 10px 8px !important; }
body[data-age="high"] .curr-card,
body[data-age="adult"] .curr-card { padding: 8px 7px !important; }
body[data-age="high"] .curr-grid,
body[data-age="adult"] .curr-grid { gap: 4px !important; }

/* ── 9. 태블릿 패딩 일관화 (600px+) ── */
@media (min-width: 600px) {
  #screenHome,#screenStudy  { padding-bottom: var(--safe-pb) !important; }
  #screenResult              { padding-bottom: var(--safe-pb) !important; }
  #screenMypage,#screenRanking,#screenWrongNote,#screenParentReport {
    padding-bottom: var(--safe-pb) !important;
  }
  #tabletSidebar,#studyTabletSidebar,#challengeTabletSidebar {
    padding-bottom: var(--safe-pb) !important;
  }
  /* 국어·일본어 태블릿에서 3열 */
  #koreanTypeGrid,#japaneseTypeGrid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  /* 고등·성인 태블릿은 4열 */
  body[data-age="high"] #koreanTypeGrid,
  body[data-age="adult"] #koreanTypeGrid,
  body[data-age="high"] #japaneseTypeGrid,
  body[data-age="adult"] #japaneseTypeGrid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  /* 국어·일본어 카드 태블릿에서 세로 방향 복원 */
  .kor-type-card {
    flex-direction: row !important;
    align-items: center !important;
    min-height: auto;
    padding: 12px 14px !important;
  }
  .kor-type-icon { width: 44px !important; height: 44px !important; font-size: 1.8rem !important; }
  .kor-type-name { font-size: 1rem !important; }
  .kor-type-desc { font-size: .7rem !important; }
}