:root{
  --gold:#D9A441;--gold2:#B0762E;
  --emerald:#2ECC71;--sky:#5DADE2;--purple:#9B59B6;
  --red:#E74C3C;--red2:#C0392B;
  --bg0:#15110D;--bg2:#241E16;--bg3:#3A2E20;
  --txt:#EFE7D9;--txt2:#BCAB92;--txt3:#7E6E5A;
  --border:rgba(217,164,65,.18);--r:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
@keyframes ldBar{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
html,body{height:100%;font-family:'Noto Sans KR',sans-serif;background:var(--bg0);color:var(--txt);overflow:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1px 1px at 15% 25%,rgba(255,255,255,.5),transparent),
             radial-gradient(2px 2px at 55% 8%,rgba(255,255,255,.4),transparent),
             radial-gradient(1px 1px at 78% 55%,rgba(255,255,255,.5),transparent),
             radial-gradient(1px 1px at 30% 70%,rgba(255,255,255,.3),transparent),
             radial-gradient(2px 2px at 90% 20%,rgba(255,255,255,.4),transparent);}

/* ── 화면 전환 ── */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;transition:opacity .5s,transform .5s;}
.screen.gone{opacity:0;transform:scale(1.03);pointer-events:none;}
.screen.hidden{display:none!important;}

/* ── 타이틀 ── */
#s-title{background:radial-gradient(ellipse at 50% 60%,#2A2218,var(--bg0) 70%);}
.title-logo{font-family:'Gowun Batang',serif;font-size:clamp(2rem,6vw,3.8rem);font-weight:700;
  background:linear-gradient(135deg,#D9A441,#B0762E,#D9A441);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px rgba(214,166,74,.6));
  animation:logoPulse 3s ease-in-out infinite;text-align:center;}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 20px rgba(214,166,74,.5))}50%{filter:drop-shadow(0 0 45px rgba(214,166,74,.9));}}
.title-sub{color:var(--txt2);font-size:.9rem;letter-spacing:.25em;margin:.6rem 0 2.5rem;text-align:center;}
.title-floaters{display:flex;gap:1.2rem;margin-bottom:2.5rem;}
.floater{width:72px;height:88px;background:rgba(255,255,255,.04);border:1.5px solid var(--border);
  border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;
  animation:floatY 3s ease-in-out infinite;}
.floater:nth-child(2){animation-delay:.25s;}.floater:nth-child(3){animation-delay:.5s;}.floater:nth-child(4){animation-delay:.75s;}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px);}}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--bg0);
  font-family:'Noto Sans KR',sans-serif;font-weight:900;font-size:1.1rem;
  padding:.9rem 2.8rem;border:none;border-radius:50px;cursor:pointer;
  box-shadow:0 0 30px rgba(214,166,74,.4);transition:transform .2s;
  animation:btnGlow 2.5s ease-in-out infinite;}
.btn-gold:hover{transform:scale(1.06);}
@keyframes btnGlow{0%,100%{box-shadow:0 0 28px rgba(214,166,74,.4)}50%{box-shadow:0 0 50px rgba(214,166,74,.7);}}

/* ── 로그인 ── */
#s-login{background:radial-gradient(ellipse at 50% 40%,#2A2218,var(--bg0) 70%);}
.login-card{background:rgba(15,52,96,.85);border:1px solid var(--border);border-radius:22px;
  padding:2.2rem;width:clamp(300px,90vw,400px);box-shadow:0 20px 60px rgba(0,0,0,.5);}
.login-head{font-family:'Gowun Batang',serif;font-size:1.4rem;color:var(--gold);text-align:center;margin-bottom:1.6rem;}
.student-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.2rem;}
.stu-btn{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);border-radius:10px;
  padding:.7rem .8rem;color:var(--txt);cursor:pointer;font-family:'Noto Sans KR',sans-serif;
  font-size:.88rem;transition:all .2s;display:flex;align-items:center;gap:.5rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.stu-btn:hover,.stu-btn.sel{background:rgba(217,164,65,.12);border-color:var(--gold);color:var(--gold);}
.login-input{width:100%;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.15);
  border-radius:10px;padding:.75rem 1rem;color:var(--txt);font-size:.95rem;
  font-family:'Noto Sans KR',sans-serif;margin-bottom:.9rem;outline:none;transition:border-color .2s;}
.login-input:focus{border-color:var(--gold);}
.btn-red{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-family:'Noto Sans KR',sans-serif;
  font-weight:700;font-size:.95rem;padding:.8rem;border:none;border-radius:10px;cursor:pointer;width:100%;transition:all .2s;}
.btn-red:hover{transform:scale(1.02);}
.login-err{color:var(--red);font-size:.78rem;text-align:center;margin-top:.5rem;min-height:1em;}
.login-admin-link{text-align:center;margin-top:.8rem;}
.login-admin-link a{color:var(--txt3);font-size:.75rem;text-decoration:none;}

/* ── 캐릭터 선택 ── */
#s-charsel{background:radial-gradient(ellipse at 50% 40%,#2A2218,var(--bg0) 70%);}
.charsel-title{font-family:'Gowun Batang',serif;font-size:1.6rem;color:var(--gold);margin-bottom:.5rem;text-align:center;}
.charsel-sub{color:var(--txt2);font-size:.85rem;margin-bottom:2rem;text-align:center;}
.char-options{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;margin-bottom:2rem;}
.char-opt{width:110px;height:140px;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.1);
  border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;cursor:pointer;transition:all .25s;font-size:3rem;}
.char-opt:hover{transform:translateY(-5px);border-color:rgba(217,164,65,.5);}
.char-opt.sel{border-color:var(--gold);background:rgba(217,164,65,.1);box-shadow:0 0 20px rgba(217,164,65,.2);}
.char-opt-name{font-size:.78rem;color:var(--txt2);}

/* ════ 게임 화면 ════ */
#s-game{display:none;flex-direction:column;position:fixed;inset:0;z-index:10;overflow:hidden;}
#s-game.active{display:flex;}

/* ── HUD ── */
.hud{flex-shrink:0;background:linear-gradient(180deg,rgba(13,13,26,.97),rgba(13,13,26,.88));
  border-bottom:1px solid var(--border);backdrop-filter:blur(12px);
  padding:.65rem 1.2rem;display:flex;align-items:center;gap:.9rem;z-index:50;}
.hud-ava{width:40px;height:40px;background:rgba(217,164,65,.1);border:2px solid rgba(217,164,65,.35);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;cursor:pointer;}
.hud-center{flex:1;min-width:0;}
.hud-name-row{display:flex;align-items:center;gap:.5rem;min-width:0;}
.hud-name{font-weight:700;font-size:.9rem;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;}
.hud-title-badge{font-size:.7rem;color:var(--purple);background:rgba(155,89,182,.12);
  border:1px solid rgba(155,89,182,.3);border-radius:20px;padding:.1rem .5rem;}
.promotion-badge{font-size:.7rem;color:var(--gold);background:rgba(217,164,65,.15);
  border:1px solid rgba(217,164,65,.5);border-radius:20px;padding:.1rem .5rem;
  animation:promoBlink 1s ease-in-out infinite;cursor:pointer;}
@keyframes promoBlink{0%,100%{opacity:1}50%{opacity:.5;}}
.hud-exp-row{display:flex;align-items:center;gap:.5rem;margin-top:.25rem;min-width:0;}
.hud-exp-bar{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;min-width:0;}
.hud-exp-fill{height:100%;background:linear-gradient(90deg,var(--emerald),#27AE60);border-radius:3px;transition:width .8s ease;}
.hud-exp-txt{font-size:.6rem;color:var(--txt2);white-space:nowrap;flex-shrink:0;}
/* [WORDS-1] EXP 가 무슨 말인지 한 번만 알려 준다. 숫자(40 / 5020 EXP)는 그대로 둔다.
   좁은 폭에서는 감춘다 — 431px 에 넣어 보니 EXP 바가 41px 까지 눌렸다.
   기준은 700px — [HUDBTN-1] 이 상단 두 버튼을 빼는 것과 같은 자리다. */
.hud-exp-label{font-size:.6rem;color:var(--txt3);white-space:nowrap;flex-shrink:0;}
@media(max-width:700px){ .hud-exp-label{display:none;} }
/* [WORDS-1] 상단 두 버튼 — student.html 인라인 style 을 그대로 옮겨 온 것.
   클래스로 빼야 아래 [TOUCH-44] 에서 44px 을 줄 수 있다. */
.hud-mini-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:var(--txt2);border-radius:8px;padding:.2rem .5rem;font-size:.7rem;
  cursor:pointer;white-space:nowrap;}
.hud-badges{display:flex;gap:.5rem;flex-shrink:0;min-width:0;}
.badge{display:flex;align-items:center;gap:.25rem;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:.25rem .6rem;font-size:.8rem;font-weight:700;}
.badge.lv{border-color:rgba(93,173,226,.4);color:var(--sky);}
.badge.gold{border-color:rgba(217,164,65,.4);color:var(--gold);}

/* ── 게임 바디 (데스크탑: 사이드+메인 / 모바일: 탭) ── */
.game-body{flex:1;display:grid;grid-template-columns:minmax(260px, 26%) 1fr;overflow:hidden;min-height:0;}

/* ── 사이드 패널 (데스크탑) ── */
.side-panel{background:linear-gradient(180deg,var(--bg2),#0a1628);
  border-right:1px solid rgba(217,164,65,.12);
  overflow-y:auto;overflow-x:hidden;
  padding:1rem .9rem;
  display:flex;flex-direction:column;gap:.7rem;
  min-height:0;          /* 그리드 자식 스크롤 핵심 */
  height:100%;           /* 그리드 셀 높이에 고정 */
}
.side-panel::-webkit-scrollbar{width:4px;}
.side-panel::-webkit-scrollbar-thumb{background:rgba(217,164,65,.2);border-radius:2px;}
.char-card{background:rgba(217,164,65,.05);border:1px solid var(--border);border-radius:var(--r);
  padding:.8rem;text-align:center;position:relative;overflow:hidden;}
.char-emoji{font-size:4rem;display:block;animation:floatY 4s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(217,164,65,.3));}
.char-cname{font-weight:700;font-size:1.05rem;margin:.3rem 0 .1rem;}
.char-job{font-size:.75rem;color:var(--sky);}
/* [UI375-2] 1fr 칸은 최소 너비가 '내용 전체'라 칸이 컨테이너보다 넓어진다
   → 오른쪽(방어력·속도) 숫자가 화면 밖으로 밀린다. minmax(0,·)로 칸을 줄일 수 있게 한다. */
.char-combat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem;margin-top:.7rem;}
.combat-stat{background:rgba(255,255,255,.04);border-radius:6px;padding:.35rem .55rem;
  font-size:.78rem;display:flex;justify-content:space-between;align-items:center;
  gap:.3rem;min-width:0;}
.combat-stat > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.combat-val{font-weight:700;color:var(--gold);flex-shrink:0;}
.panel-box{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:var(--r);padding:.8rem;}
.panel-label{font-size:.72rem;color:var(--txt3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem;cursor:pointer;}
/* 장비 그리드 — 5칸 세로 나열 */
.equip-grid{display:flex;flex-direction:column;gap:.35rem;}
.equip-slot{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:9px;padding:.45rem .65rem;display:flex;align-items:center;gap:.55rem;cursor:pointer;transition:all .2s;}
.equip-slot:hover{border-color:rgba(217,164,65,.35);background:rgba(217,164,65,.06);}
.equip-slot.has{border-color:rgba(217,164,65,.3);background:rgba(217,164,65,.04);}
.eslot-icon{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.eslot-info{flex:1;min-width:0;}
.eslot-type{font-size:.65rem;color:var(--txt3);margin-bottom:.05rem;}
.eslot-name{font-size:.78rem;color:var(--gold);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ab-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem;}
.ab-row:last-child{margin-bottom:0;}
.ab-name{font-size:.74rem;color:var(--txt2);width:36px;flex-shrink:0;}
.ab-bar{flex:1;height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.ab-fill{height:100%;border-radius:3px;}
.ab-val{font-size:.72rem;font-weight:700;width:20px;text-align:right;flex-shrink:0;}
.ab-read .ab-fill{background:linear-gradient(90deg,#E74C3C,#C0392B);}
.ab-study .ab-fill{background:linear-gradient(90deg,#3498DB,#2980B9);}
.ab-art .ab-fill{background:linear-gradient(90deg,#9B59B6,#8E44AD);}
.ab-moral .ab-fill{background:linear-gradient(90deg,#2ECC71,#27AE60);}
.ab-health .ab-fill{background:linear-gradient(90deg,#F39C12,#E67E22);}
.ab-life   .ab-fill{background:linear-gradient(90deg,#27AE60,#2ECC71);}

/* ── 메인 영역 ── */
.main-area{overflow-y:auto;padding:1.2rem;}
.main-area::-webkit-scrollbar{width:5px;}
.main-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}
.sec-label{font-size:.72rem;color:var(--txt3);letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem;}
.sec-label::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07);}

/* ── 배너 ── */
.reward-banner{background:linear-gradient(135deg,rgba(46,204,113,.13),rgba(39,174,96,.06));
  border:1px solid rgba(46,204,113,.35);border-radius:var(--r);padding:.9rem 1.1rem;
  margin-bottom:1.2rem;display:flex;align-items:center;gap:.9rem;animation:slideDown .4s ease;}
.promo-banner{background:linear-gradient(135deg,rgba(217,164,65,.15),rgba(255,140,0,.08));
  border:1px solid rgba(217,164,65,.5);border-radius:var(--r);padding:.9rem 1.1rem;
  margin-bottom:1.2rem;display:flex;align-items:center;gap:.9rem;
  animation:slideDown .4s ease,promoBannerGlow 2s ease-in-out infinite;}
@keyframes promoBannerGlow{0%,100%{box-shadow:0 0 10px rgba(217,164,65,.1)}50%{box-shadow:0 0 25px rgba(217,164,65,.3);}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.rb-icon{font-size:1.6rem;}
.rb-body{flex:1;}
.rb-title{font-weight:700;font-size:.88rem;}
.rb-title.green{color:var(--emerald);}
.rb-title.gold{color:var(--gold);}
.rb-desc{font-size:.76rem;color:var(--txt2);margin-top:.15rem;}
.rb-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem;}
.rb-tag{background:rgba(217,164,65,.12);border:1px solid rgba(217,164,65,.28);
  border-radius:20px;padding:.15rem .55rem;font-size:.73rem;color:var(--gold);font-weight:700;}

/* ── 메뉴 타일 ── */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.2rem;}
.menu-tile{background:var(--bg3);border:1px solid rgba(255,255,255,.07);border-radius:var(--r);
  padding:1.1rem .8rem;cursor:pointer;transition:all .22s;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative;overflow:hidden;}
.menu-tile::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .22s;}
.menu-tile:hover{transform:translateY(-3px);}.menu-tile:hover::before{opacity:1;}
.mt-quest::before{background:linear-gradient(90deg,var(--gold),var(--gold2));}
.mt-monster::before{background:linear-gradient(90deg,var(--red),var(--red2));}
.mt-shop::before{background:linear-gradient(90deg,var(--emerald),#27AE60);}
.mt-farm::before{background:linear-gradient(90deg,#27AE60,var(--emerald));}
.mt-house::before{background:linear-gradient(90deg,var(--sky),#2980B9);}
.mt-inv::before{background:linear-gradient(90deg,var(--purple),#8E44AD);}
.menu-tile:hover.mt-quest{background:rgba(217,164,65,.07);border-color:rgba(217,164,65,.28);}
.menu-tile:hover.mt-monster{background:rgba(231,76,60,.07);border-color:rgba(231,76,60,.28);}
.menu-tile:hover.mt-shop{background:rgba(46,204,113,.07);border-color:rgba(46,204,113,.28);}
.menu-tile:hover.mt-farm{background:rgba(39,174,96,.07);border-color:rgba(39,174,96,.28);}
.menu-tile:hover.mt-house{background:rgba(93,173,226,.07);border-color:rgba(93,173,226,.28);}
.menu-tile:hover.mt-inv{background:rgba(155,89,182,.07);border-color:rgba(155,89,182,.28);}
.tile-icon{font-size:2rem;}.tile-name{font-size:.85rem;font-weight:700;}
.tile-desc{font-size:.68rem;color:var(--txt2);text-align:center;}
.tile-notif{position:absolute;top:.5rem;right:.5rem;background:var(--red);color:#fff;
  font-size:.62rem;font-weight:700;padding:.1rem .38rem;border-radius:10px;}

/* ── 오늘 현황 ── */
.today-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.today-card{background:var(--bg3);border:1px solid rgba(255,255,255,.07);border-radius:var(--r);padding:.9rem;}
.tc-label{font-size:.72rem;color:var(--txt2);margin-bottom:.7rem;display:flex;align-items:center;gap:.35rem;}
.act-row{display:flex;align-items:center;justify-content:space-between;
  padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.8rem;}
.act-row:last-child{border-bottom:none;}
.act-st{font-size:.72rem;font-weight:700;}
.act-st.done{color:var(--emerald);}.act-st.pend{color:var(--txt3);}
.mon-mini{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem;}
.mon-icon-big{font-size:2rem;}
.mon-name-txt{font-weight:700;font-size:.88rem;color:var(--red);}
.mon-lv-txt{font-size:.7rem;color:var(--txt2);}
.mon-hp{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;margin-top:.3rem;}
.mon-hp-fill{height:100%;background:linear-gradient(90deg,var(--red),var(--red2));border-radius:3px;}
.farm-mini-grid{display:grid;gap:3px;margin-top:.5rem;}
.fcell{aspect-ratio:1;border-radius:4px;background:rgba(46,204,113,.08);
  border:1px solid rgba(46,204,113,.18);display:flex;align-items:center;justify-content:center;
  font-size:.9rem;cursor:pointer;transition:all .2s;}
.fcell:hover{transform:scale(1.1);}
.fcell.ready{border-color:rgba(217,164,65,.5);background:rgba(217,164,65,.1);animation:farmPulse 1.5s ease-in-out infinite;}
@keyframes farmPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 8px rgba(217,164,65,.4);}}
.friend-row{display:flex;align-items:center;justify-content:space-between;
  padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.8rem;cursor:pointer;transition:color .2s;}
.friend-row:last-child{border-bottom:none;}.friend-row:hover{color:var(--gold);}

/* ── 📢 알림 카드 (중요도 위계) ── */
@keyframes todoPulse{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.0)}50%{box-shadow:0 0 0 5px rgba(231,76,60,.22)}}
@keyframes todoGlow{0%,100%{box-shadow:0 0 0 0 rgba(217,164,65,.0)}50%{box-shadow:0 0 0 4px rgba(217,164,65,.18)}}
@keyframes todoShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}

.todo-grid{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.2rem;}

/* 기본 카드 */
.todo-card{display:flex;align-items:center;gap:.9rem;
  background:var(--bg3);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:.75rem 1rem;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
.todo-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;}
.todo-card:hover{transform:translateX(3px);border-color:rgba(255,255,255,.18);}
.todo-card:active{transform:translateX(1px);}

/* 🔴 긴급 — 크게 + 빨간 테두리 + 박동 */
.todo-card.urgent{
  padding:1rem 1.1rem;
  border:1.5px solid rgba(231,76,60,.5);
  background:rgba(231,76,60,.06);
  animation:todoPulse 2s ease-in-out infinite;}
.todo-card.urgent::before{background:var(--red);width:4px;}
.todo-card.urgent .todo-icon{font-size:1.8rem;}
.todo-card.urgent .todo-title{font-size:.95rem;}

/* 🟡 권장 — 중간 강조 */
.todo-card.farm.urgent{
  padding:1rem 1.1rem;
  border:1.5px solid rgba(231,76,60,.5);
  background:rgba(231,76,60,.06);
  animation:todoPulse 2s ease-in-out infinite;}
.todo-card.farm.urgent::before{background:var(--red);width:4px;}
.todo-card.farm.urgent .todo-icon{font-size:1.8rem;}
.todo-card.farm.urgent .todo-title{font-size:.95rem;}

.todo-card.promo{
  border:1.5px solid rgba(217,164,65,.4);
  background:rgba(217,164,65,.05);
  animation:todoGlow 2.5s ease-in-out infinite;}
.todo-card.promo::before{background:var(--purple);}
.todo-card.promo .todo-icon{font-size:1.65rem;}
.todo-card.promo .todo-title{font-size:.92rem;}

.todo-card.monster{border-color:rgba(231,76,60,.25);background:rgba(231,76,60,.03);}
.todo-card.monster::before{background:var(--red);}
.todo-card.monster .todo-icon{font-size:1.6rem;}

/* 🔵 일반 */
.todo-card.quest::before{background:var(--gold);}
.todo-card.farm::before{background:var(--emerald);}
.todo-card.hint::before{background:var(--sky);}

/* ⚪ 힌트/완료 — 작고 흐리게 */
.todo-card.hint{opacity:.7;padding:.6rem .9rem;}
.todo-card.hint .todo-icon{font-size:1.2rem;}
.todo-card.hint .todo-title{font-size:.82rem;}
.todo-card.done{opacity:.75;padding:.6rem .9rem;cursor:default;}
.todo-card.done::before{background:var(--emerald);}
.todo-card.done .todo-icon{font-size:1.2rem;}

.todo-icon{font-size:1.5rem;flex-shrink:0;}
.todo-body{flex:1;min-width:0;}
.todo-title{font-weight:700;font-size:.88rem;margin-bottom:.1rem;display:flex;align-items:center;gap:.4rem;}
.todo-sub{font-size:.72rem;color:var(--txt2);}
.todo-arrow{color:var(--txt3);font-size:.9rem;flex-shrink:0;}
.todo-badge{background:var(--red);color:#fff;font-size:.62rem;font-weight:700;
  padding:.1rem .38rem;border-radius:10px;flex-shrink:0;}
.todo-btn{font-size:.72rem;font-weight:700;padding:.3rem .7rem;border-radius:20px;
  border:none;cursor:pointer;font-family:'Noto Sans KR',sans-serif;flex-shrink:0;transition:all .2s;}
.todo-btn.urgent,.todo-btn.monster{background:var(--red);color:#fff;}
.todo-btn.quest{background:var(--gold);color:#1a1a1a;}
.todo-btn.farm{background:var(--emerald);color:#fff;}
.todo-btn.promo{background:var(--purple);color:#fff;}
.todo-btn.hint{background:rgba(255,255,255,.1);color:var(--txt2);}
.todo-btn:hover{opacity:.85;transform:scale(1.04);}

/* ── 📋 퀘스트 ── */
.mission-list{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.2rem;}
.mission-row{display:flex;align-items:center;gap:.7rem;
  background:var(--bg3);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:.6rem .9rem;cursor:pointer;transition:all .2s;}
.mission-row.done{opacity:.55;}
.mission-row.pending{opacity:.8;border-color:rgba(217,164,65,.2);}
.mission-row:hover{border-color:rgba(217,164,65,.2);}
.mission-check{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0;}
.mission-check.done{background:var(--emerald);border-color:var(--emerald);}
.mission-check.wait{background:rgba(217,164,65,.2);border-color:var(--gold);font-size:.8rem;}
.mission-name{flex:1;font-size:.83rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mission-reward{font-size:.7rem;color:var(--gold);flex-shrink:0;}
.mission-row.done .mission-name{text-decoration:line-through;color:var(--txt3);}

/* ── 모달 ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;
  align-items:center;justify-content:center;padding:.7rem;backdrop-filter:blur(6px);}
.overlay.open{display:flex;}
.modal{background:linear-gradient(145deg,#241E16,#3A2E20);border:1px solid var(--border);
  border-radius:20px;padding:1.3rem 1.4rem;width:min(540px,100%);max-height:90vh;
  overflow-y:auto;box-shadow:0 0 80px rgba(214,166,74,.08),0 30px 80px rgba(0,0,0,.6);animation:modalPop .28s ease;}
.modal::-webkit-scrollbar{width:4px;}

/* ── 오늘의 학습 모달 — 공부용이라 크게 (DAILY-STUDY-1) ──
   크롬북·태블릿에서 위아래를 거의 가득 채운다. 글씨도 본문 기준으로 키움.
   내용이 적어도 높이가 유지되도록 min-height + flex로 늘린다. */
#m-study .modal{
  width:min(820px,96vw);
  max-height:97vh;
  min-height:min(92vh,900px);
  padding:1.5rem 1.7rem;
  display:flex;flex-direction:column;overflow:hidden;
}
#m-study .modal-title{font-size:1.5rem;}
#m-study .modal-close{font-size:1.9rem;}
#m-study .modal-hd{margin-bottom:1.1rem;flex-shrink:0;}
#study-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start;}
/* 결과·피드백 화면은 세로 중앙에 오는 편이 보기 좋다 */
#study-body > .st-center{margin:auto 0}
/* 학습 화면 안의 글자·버튼 크기 (공부용 확대) */
#study-body .st-q{font-size:1.6rem;line-height:1.55;font-weight:700;word-break:keep-all;}
#study-body .st-meta{font-size:.95rem;}
#study-body .st-opt{font-size:1.25rem;padding:1.05rem 1.2rem;border-radius:14px;}
#study-body .st-input{font-size:1.35rem;padding:1rem 1.1rem;border-radius:14px;}
#study-body .st-btn{font-size:1.2rem;padding:1rem 1.4rem;border-radius:14px;}
#study-body .st-subject{font-size:1.25rem;}
#study-body .st-subject-sub{font-size:.9rem;}
#study-body .st-hint{font-size:1.05rem;}
#study-body .st-score{font-size:3rem;}
#study-body .st-emoji{font-size:4rem;}
/* ── 아이들용 아기자기 스타일 (STUDY-CUTE-1) ──
   공부 화면이라 딱딱하지 않게. 모서리를 더 둥글게, 색을 부드럽게,
   누를 때 말랑하게 반응하도록. 다크 판타지 톤은 유지한다. */
#m-study .modal{border-radius:26px}
#study-body .st-opt{
  border-radius:18px;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1), background .15s, border-color .15s;
}
#study-body .st-opt:hover{
  transform:translateY(-2px) scale(1.01);
  background:rgba(255,255,255,.10);
  border-color:rgba(217,164,65,.4);
}
#study-body .st-opt:active{transform:translateY(1px) scale(.99)}
#study-body .st-input{border-radius:18px}
#study-body .st-btn{border-radius:18px;transition:transform .12s cubic-bezier(.34,1.56,.64,1),filter .15s}
#study-body .st-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
#study-body .st-btn:active{transform:translateY(1px)}
/* 과목 고르기 카드 — 통통 튀는 반응 */
#study-body .st-subject-card{
  border-radius:20px;
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), background .15s, border-color .15s;
}
#study-body .st-subject-card:hover{
  transform:translateY(-3px) scale(1.015);
  background:rgba(255,255,255,.09);
  border-color:rgba(217,164,65,.35);
}
#study-body .st-subject-card:active{transform:translateY(0) scale(.99)}
/* 정답·오답 반응 */
@keyframes st-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes st-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
#study-body .st-emoji{animation:st-pop .42s cubic-bezier(.34,1.56,.64,1)}
#study-body .st-emoji.wrong{animation:st-shake .45s ease}
/* 진행 막대 — 둥글고 반짝이게 */
#study-body .st-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
#study-body .st-bar > i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#FFD86B,#FFC93C);
  box-shadow:0 0 12px rgba(217,164,65,.5);
  transition:width .35s cubic-bezier(.34,1.56,.64,1);
}
/* 별점 — 오늘 얼마나 했는지 한눈에 */
/* 풀이 연습장(수학) — 어두운 화면 위에 올려둔 '종이' */
#study-body .st-scratch{margin:0 0 1.4rem;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);background:#F7F5EC;box-shadow:0 4px 14px rgba(0,0,0,.25);}
#study-body .st-scratch-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.45rem .5rem .45rem .9rem;background:rgba(43,58,85,.07);
  color:#5A6478;font-size:.92rem;font-weight:700;}
#study-body .st-scratch-clear{border:1px solid rgba(43,58,85,.22);background:#fff;color:#5A6478;
  font-family:inherit;font-size:.9rem;font-weight:700;padding:.4rem .85rem;border-radius:10px;
  cursor:pointer;flex-shrink:0;transition:background .15s,transform .1s;}
#study-body .st-scratch-clear:hover{background:#EDEAE0;}
#study-body .st-scratch-clear:active{transform:translateY(1px);}
/* touch-action:none — 손가락으로 그릴 때 페이지가 같이 스크롤되지 않게 */
#study-body #study-scratch{display:block;width:100%;height:clamp(130px,24vh,200px);
  touch-action:none;cursor:crosshair;
  background-image:linear-gradient(rgba(43,58,85,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(43,58,85,.09) 1px,transparent 1px);
  background-size:26px 26px;}
/* 문항 그림(FIG-1) — 선 색은 글자색, 배경은 살짝 밝은 판 */
#study-body .st-fig{color:var(--txt);margin:0 0 1rem;padding:.7rem .6rem;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);}
/* 모드 칩(STUDY-MODES-1) — 계산/문장제/개념, OX/상황/추론 */
#study-body .st-chips{display:flex;gap:.45rem;flex-wrap:wrap;margin:0 0 1rem;}
#study-body .st-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--txt2);
  font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .12s,background .15s;}
#study-body .st-chip:hover{background:rgba(255,255,255,.1);transform:translateY(-1px);}
#study-body .st-chip.on{background:rgba(217,164,65,.16);border-color:rgba(217,164,65,.5);color:var(--gold);}
#study-body .st-chip:disabled{opacity:.35;cursor:not-allowed;transform:none;}
#study-body .st-chip-n{font-size:.78rem;font-weight:600;color:var(--txt3);background:rgba(0,0,0,.25);
  padding:.1rem .45rem;border-radius:999px;}
#study-body .st-chip.on .st-chip-n{color:var(--gold);}
/* OX 문항(SOCIAL-TYPES-1) — 좌우 큰 버튼 */
#study-body .st-ox{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
#study-body .st-ox-btn{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.2rem .8rem;
  border-radius:16px;border:1px solid rgba(46,204,113,.4);background:rgba(46,204,113,.09);color:var(--txt);
  font-family:inherit;font-size:1.15rem;font-weight:700;cursor:pointer;}
#study-body .st-ox-btn.x{border-color:rgba(231,76,60,.4);background:rgba(231,76,60,.09);}
#study-body .st-ox-mark{font-size:2.6rem;line-height:1;}
#study-body .st-stars{font-size:1.5rem;letter-spacing:.15rem}
@media (prefers-reduced-motion: reduce){
  #study-body *{animation:none !important;transition:none !important}
}
/* 세로로 긴 화면(태블릿 세로)에서는 빈 공간이 과하게 남지 않게 */
@media (orientation:portrait){
  #m-study .modal{min-height:min(76vh,780px);}
}
/* 세로가 짧은 크롬북(1366×610 등)에서는 여백만 줄이고 글씨는 유지 */
@media (orientation:landscape) and (max-height:700px){
  #m-study .modal{min-height:96vh;max-height:98vh;padding:1rem 1.3rem;}
  #m-study .modal-hd{margin-bottom:.6rem;}
  #study-body .st-q{font-size:1.4rem;}
  #study-body .st-emoji{font-size:3rem;}
  #study-body .st-score{font-size:2.4rem;}
}
.modal::-webkit-scrollbar-thumb{background:rgba(217,164,65,.2);border-radius:2px;}
@keyframes modalPop{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:none}}
.modal-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;}
.modal-title{font-size:1.08rem;font-weight:700;color:var(--gold);}
.modal-close{background:none;border:none;color:var(--txt3);font-size:1.3rem;cursor:pointer;transition:color .2s;}
.modal-close:hover{color:var(--txt);}
.modal-tabs{display:flex;gap:.3rem;margin-bottom:.7rem;flex-wrap:wrap;}
.mtab{padding:.28rem .75rem;border-radius:20px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);color:var(--txt2);cursor:pointer;
  font-size:.78rem;font-family:'Noto Sans KR',sans-serif;transition:all .2s;}
.mtab.on{background:rgba(217,164,65,.14);border-color:var(--gold);color:var(--gold);}

/* ── 대형 패널 모달 ── */
.large-modal{
  display:flex;flex-direction:column;
  width:min(84vw,860px);height:min(88vh,900px);
  max-height:88vh;overflow:hidden;
  padding:0;
}
.lm-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 1.4rem .7rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.lm-header .modal-title{font-size:1.1rem;}
.lm-header .modal-close{font-size:1.3rem;}
.lm-tabs{
  padding:.6rem 1.4rem .5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.lm-body{
  flex:1;overflow-y:auto;
  padding:.8rem 1.4rem 1rem;
}
.lm-body::-webkit-scrollbar{width:4px;}
.lm-body::-webkit-scrollbar-thumb{background:rgba(217,164,65,.2);border-radius:2px;}

/* 사냥터 카드 이펙트 */
.zone-shine{position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);
  animation:shine 3s infinite;pointer-events:none;}
@keyframes shine{0%{transform:translateX(-100%) rotate(0deg)}100%{transform:translateX(100%) rotate(0deg)}}

/* 모바일 대형 모달 */
@media(max-width:600px){
  .large-modal{width:96vw;height:92vh;max-height:92vh;}
  .lm-header,.lm-tabs,.lm-body{padding-left:.9rem;padding-right:.9rem;}
}

/* 퀘스트 */
.quest-list{display:flex;flex-direction:column;gap:.4rem;}
.quest-row{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:.6rem .8rem;display:flex;align-items:center;gap:.7rem;}
.qr-icon{font-size:1.2rem;width:30px;text-align:center;}
.qr-body{flex:1;}.qr-name{font-weight:700;font-size:.84rem;}
.qr-desc{font-size:.68rem;color:var(--txt2);margin-top:.08rem;}
.qr-right{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;}
.qr-status{font-size:.66rem;font-weight:700;padding:.12rem .45rem;border-radius:20px;}
.qr-status.approved{background:rgba(46,204,113,.2);color:var(--emerald);}
.qr-status.waiting{background:rgba(255,255,255,.06);color:var(--txt3);}
.qr-rewards{font-size:.66rem;color:var(--sky);}

/* 상점 */
.shop-gold-bar{font-size:.82rem;color:var(--gold);margin-bottom:.7rem;
  background:rgba(217,164,65,.07);border:1px solid rgba(217,164,65,.2);border-radius:8px;padding:.4rem .7rem;}
.item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;}
.item-card{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.09);
  border-radius:10px;padding:.5rem .65rem;cursor:pointer;transition:all .2s;}
.item-card:hover{border-color:rgba(217,164,65,.38);background:rgba(217,164,65,.05);}
.item-card.cant-afford{opacity:.5;}
.item-card.cond-fail{border-color:rgba(231,76,60,.2);}
.shop-row-card{display:flex;align-items:center;}
.ic-icon{font-size:1.4rem;margin-bottom:.2rem;}
.ic-name{font-size:.8rem;font-weight:700;}
.ic-stats{font-size:.64rem;color:var(--txt2);margin-top:.06rem;}
.ic-cond{font-size:.64rem;margin-top:.1rem;}
.ic-cond.met{color:var(--emerald);}.ic-cond.fail{color:var(--red);}
.ic-price{display:flex;align-items:center;gap:.2rem;margin-top:.3rem;font-weight:700;color:var(--gold);font-size:.82rem;}

/* 몬스터 */
.monster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;}
.mon-card{background:rgba(231,76,60,.05);border:1.5px solid rgba(231,76,60,.18);
  border-radius:10px;padding:.6rem .4rem;cursor:pointer;transition:all .22s;text-align:center;}
.mon-card:hover:not(.locked){border-color:rgba(231,76,60,.48);transform:translateY(-2px);}
.mon-card.killed{border-color:rgba(255,255,255,.06);opacity:.55;}
.mon-card.locked{opacity:.35;cursor:default;}
.mc-icon{font-size:1.6rem;margin-bottom:.2rem;}.mc-name{font-weight:700;font-size:.78rem;}
.mc-lv{font-size:.65rem;color:var(--txt2);}.mc-gold{color:var(--gold);font-size:.7rem;font-weight:700;margin-top:.15rem;}
.mc-tag{display:inline-block;margin-top:.2rem;padding:.08rem .35rem;border-radius:10px;font-size:.6rem;font-weight:700;}
.tag-new{background:rgba(231,76,60,.28);color:#FF8A80;}
.tag-done{background:rgba(255,255,255,.06);color:var(--txt3);}
/* ── 사냥터 후보 카드 ── */
.offer-card{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;
  background:rgba(231,76,60,.05);border:1.5px solid rgba(231,76,60,.2);
  border-radius:12px;cursor:pointer;transition:all .2s;}
.offer-card:hover:not(.offer-locked){border-color:rgba(231,76,60,.5);background:rgba(231,76,60,.1);transform:translateX(3px);}
.offer-card.offer-locked{opacity:.38;cursor:default;}
.offer-icon{font-size:2rem;flex-shrink:0;}
.offer-body{flex:1;min-width:0;}
.offer-name{font-weight:700;font-size:.88rem;}
.offer-meta{font-size:.68rem;color:var(--txt2);margin-top:.15rem;display:flex;gap:.35rem;flex-wrap:wrap;}
.offer-badge{display:inline-block;padding:.1rem .38rem;border-radius:8px;font-size:.62rem;font-weight:700;}
.ob-elem-fire{background:rgba(231,76,60,.25);color:#FF8A80;}
.ob-elem-water{background:rgba(52,152,219,.25);color:#7ec8e3;}
.ob-elem-grass{background:rgba(39,174,96,.25);color:#6fd49d;}
.ob-rarity-common{background:rgba(255,255,255,.1);color:var(--txt2);}
.ob-rarity-rare{background:rgba(52,152,219,.25);color:#7ec8e3;}
.ob-rarity-legend{background:rgba(155,89,182,.3);color:#c39bd3;}
.ob-ghost{background:rgba(200,200,200,.15);color:#ccc;}
.ob-new{background:rgba(217,164,65,.2);color:var(--gold);}
.ob-done{background:rgba(255,255,255,.07);color:var(--txt3);}
.offer-arrow{color:var(--txt3);font-size:1rem;flex-shrink:0;}
.offer-slot-label{font-size:.62rem;color:var(--txt3);margin-bottom:.3rem;font-weight:600;}

/* ── 전투 ── */
/* ── 전투 모달 ── */
.battle-modal{
  width:min(560px,96vw);
  background:linear-gradient(160deg,#0e1a2e 0%,#1a0e2e 50%,#0e1a2e 100%);
  padding:0;overflow:hidden;
}
.bat-header{
  position:relative;text-align:center;
  padding:1rem 2.5rem .7rem;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 100%);
  border-bottom:1px solid rgba(217,164,65,.15);
}
.bat-header-deco{font-size:.72rem;color:rgba(217,164,65,.5);letter-spacing:.15em;margin-bottom:.2rem;}
.bat-title{font-size:1.2rem;font-weight:900;color:var(--gold);text-shadow:0 0 20px rgba(217,164,65,.4);}
.bat-sub{font-size:.72rem;color:var(--txt3);margin-top:.15rem;}
.bat-close{position:absolute;top:.8rem;right:1rem;font-size:1.3rem;}

/* 전투 무대 */
.battle-arena{padding:.9rem 1rem 1rem;text-align:center;}

/* VS 대치 영역 */
.ba-stage{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;
  margin-bottom:.9rem;
  background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 100%);
  border-radius:16px;padding:.8rem .5rem;
}
.ba-fighter{display:flex;flex-direction:column;align-items:center;gap:.3rem;}
.ba-fighter-name{font-size:.82rem;font-weight:800;letter-spacing:.02em;}
.ba-fighter-icon{position:relative;margin:.2rem 0;}
.ba-hp-bar-bg{height:10px;background:rgba(255,255,255,.1);border-radius:5px;overflow:hidden;width:100%;margin-top:.2rem;}
.ba-hp-bar-fill{height:100%;border-radius:5px;transition:width .4s ease;}
.ba-char-hp{background:linear-gradient(90deg,#27AE60,#6fd49d);}
.ba-mon-hp{background:linear-gradient(90deg,#C0392B,#E74C3C);}
.ba-hp-txt{font-size:.68rem;color:var(--txt2);text-align:center;margin-top:.18rem;font-weight:700;}
.ba-stats-txt{font-size:.6rem;color:var(--txt3);text-align:center;margin-top:.15rem;line-height:1.5;}
.ba-vs-center{display:flex;flex-direction:column;align-items:center;gap:.15rem;}
.ba-vs-bolt{font-size:2rem;filter:drop-shadow(0 0 8px rgba(255,180,0,.7));animation:pulseBolt 1.5s ease-in-out infinite;}
@keyframes pulseBolt{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.75}}
.ba-vs-label{font-size:.85rem;font-weight:900;color:rgba(255,255,255,.25);letter-spacing:.1em;}

/* 전투 로그 */
.ba-log-wrap{
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:.65rem .85rem;margin-bottom:.8rem;
  min-height:72px;max-height:130px;overflow-y:auto;text-align:left;
  scroll-behavior:smooth;
}
.ba-log-wrap::-webkit-scrollbar{width:3px;}
.ba-log-wrap::-webkit-scrollbar-thumb{background:rgba(217,164,65,.2);border-radius:2px;}
.ba-log-title{font-size:.58rem;color:rgba(217,164,65,.4);font-weight:700;letter-spacing:.1em;margin-bottom:.3rem;}
.ba-log{font-size:.79rem;line-height:1.75;color:var(--txt2);}
.ba-log .good{color:#6fd49d;font-weight:700;}.ba-log .bad{color:#FF8A80;font-weight:700;}.ba-log .info{color:#7ec8e3;}

/* 스킬2 이펙트 */
@keyframes skill-ki {
  0%   { box-shadow:0 0 0 0 rgba(217,164,65,0); transform:scale(1); }
  30%  { box-shadow:0 0 30px 12px rgba(217,164,65,.55), inset 0 0 20px rgba(217,164,65,.25); transform:scale(1.04); }
  60%  { box-shadow:0 0 50px 20px rgba(255,140,0,.4), inset 0 0 30px rgba(255,100,0,.2); transform:scale(1.06); }
  100% { box-shadow:0 0 0 0 rgba(217,164,65,0); transform:scale(1); }
}
@keyframes skill-heal {
  0%   { box-shadow:0 0 0 0 rgba(111,212,157,0); transform:scale(1); }
  40%  { box-shadow:0 0 30px 14px rgba(111,212,157,.55), inset 0 0 20px rgba(111,212,157,.3); transform:scale(1.04); }
  100% { box-shadow:0 0 0 0 rgba(111,212,157,0); transform:scale(1); }
}
@keyframes skill-guard {
  0%   { box-shadow:0 0 0 0 rgba(126,200,227,0); transform:scale(1); }
  40%  { box-shadow:0 0 28px 12px rgba(126,200,227,.6), inset 0 0 18px rgba(126,200,227,.3); transform:scale(1.03); }
  100% { box-shadow:0 0 0 0 rgba(126,200,227,0); transform:scale(1); }
}
@keyframes skill-counter {
  0%   { box-shadow:0 0 0 0 rgba(195,155,211,0); transform:scale(1); }
  25%  { box-shadow:0 0 0 18px rgba(195,155,211,.5); transform:scale(.97); }
  60%  { box-shadow:0 0 35px 20px rgba(195,155,211,.65); transform:scale(1.05); }
  100% { box-shadow:0 0 0 0 rgba(195,155,211,0); transform:scale(1); }
}
@keyframes skill-rush {
  0%,100% { transform:scale(1); }
  20%  { transform:scale(.96) translateX(-3px); }
  40%  { transform:scale(1.05) translateX(3px); box-shadow:0 0 25px 10px rgba(243,156,18,.5); }
  60%  { transform:scale(1.08) translateX(-2px); box-shadow:0 0 40px 16px rgba(243,156,18,.6); }
  80%  { transform:scale(1.04); }
}
@keyframes skill-prep {
  0%   { transform:scale(1); filter:brightness(1); }
  50%  { transform:scale(1.06); filter:brightness(1.4); box-shadow:0 0 30px 12px rgba(217,164,65,.5); }
  100% { transform:scale(1); filter:brightness(1); }
}
.skill-fx-ki      { animation: skill-ki      .7s ease-out; }
.skill-fx-heal    { animation: skill-heal     .7s ease-out; }
.skill-fx-guard   { animation: skill-guard    .65s ease-out; }
.skill-fx-counter { animation: skill-counter  .75s ease-out; }
.skill-fx-rush    { animation: skill-rush     .8s ease-out; }
.skill-fx-prep    { animation: skill-prep     .6s ease-out; }

/* 스킬 플래시 오버레이 */
@keyframes skill-flash {
  0%   { opacity:0; }
  20%  { opacity:1; }
  100% { opacity:0; }
}
.skill-flash-overlay {
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation: skill-flash .5s ease-out forwards;
}

/* 행동 버튼 */
.bat-actions{display:flex;gap:.6rem;margin-top:.2rem;}
.bat-btn-attack{
  flex:1;padding:.75rem;border-radius:12px;font-size:.95rem;font-weight:900;cursor:pointer;
  font-family:'Noto Sans KR',sans-serif;border:2px solid rgba(255,180,0,.6);
  background:linear-gradient(135deg,rgba(255,160,0,.25),rgba(214,166,74,.15));
  color:var(--gold);transition:transform .1s,box-shadow .1s,background .18s;letter-spacing:.02em;
  box-shadow:0 4px 0 rgba(180,100,0,.5), 0 6px 16px rgba(255,180,0,.15);
  transform:translateY(0);
  -webkit-tap-highlight-color:transparent;
}
.bat-btn-attack:hover:not(:disabled){
  background:linear-gradient(135deg,rgba(255,160,0,.45),rgba(214,166,74,.3));
  transform:translateY(-2px);
  box-shadow:0 6px 0 rgba(180,100,0,.5), 0 10px 24px rgba(255,180,0,.3);
}
.bat-btn-attack:active:not(:disabled){
  transform:translateY(3px) scale(.97);
  box-shadow:0 1px 0 rgba(180,100,0,.5), 0 2px 8px rgba(255,180,0,.2);
  background:linear-gradient(135deg,rgba(255,160,0,.55),rgba(214,166,74,.4));
}
.bat-btn-attack:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none;}

.bat-btn-skill{
  flex:1;padding:.75rem;border-radius:12px;font-size:.95rem;font-weight:900;cursor:pointer;
  font-family:'Noto Sans KR',sans-serif;border:2px solid rgba(93,173,226,.5);
  background:linear-gradient(135deg,rgba(93,173,226,.2),rgba(52,120,200,.12));
  color:var(--sky);transition:transform .1s,box-shadow .1s,background .18s;letter-spacing:.02em;
  box-shadow:0 4px 0 rgba(30,90,160,.5), 0 6px 16px rgba(93,173,226,.15);
  transform:translateY(0);
  -webkit-tap-highlight-color:transparent;
}
.bat-btn-skill:hover:not(:disabled){
  background:linear-gradient(135deg,rgba(93,173,226,.38),rgba(52,120,200,.25));
  transform:translateY(-2px);
  box-shadow:0 6px 0 rgba(30,90,160,.5), 0 10px 24px rgba(93,173,226,.3);
}
.bat-btn-skill:active:not(:disabled){
  transform:translateY(3px) scale(.97);
  box-shadow:0 1px 0 rgba(30,90,160,.5), 0 2px 8px rgba(93,173,226,.2);
  background:linear-gradient(135deg,rgba(93,173,226,.45),rgba(52,120,200,.35));
}
.bat-btn-skill:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none;}

/* 공격/스킬 2단계 서브 버튼 */
.bat-sub-row{display:flex;gap:.4rem;margin-top:.5rem;}
.bat-sub-btn{
  flex:1;min-width:0;padding:.4rem .2rem;border-radius:8px;font-size:.73rem;font-weight:700;
  cursor:pointer;font-family:'Noto Sans KR',sans-serif;transition:transform .1s,box-shadow .1s;
  text-align:center;
  box-shadow:0 3px 0 rgba(0,0,0,.4);
  transform:translateY(0);
  -webkit-tap-highlight-color:transparent;
}
.bat-sub-btn:active{transform:translateY(3px) scale(.96);box-shadow:0 0 0 rgba(0,0,0,.4);}
.bat-back-btn{background:none;border:none;color:var(--txt3);font-size:.68rem;cursor:pointer;font-family:inherit;margin-bottom:.3rem;padding:0;}

/* 사냥터 카드 눌림 */
.zone-card:not(.zone-locked){
  transition:transform .12s,box-shadow .12s;
  -webkit-tap-highlight-color:transparent;
}
.zone-card:not(.zone-locked):hover{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.5);}
.zone-card:not(.zone-locked):active{transform:translateY(2px) scale(.97);box-shadow:0 2px 8px rgba(0,0,0,.3);}

/* 몬스터 선택 카드 눌림 */
.mon-select-card:not(.mon-select-dim){
  transition:transform .12s,box-shadow .12s;
  -webkit-tap-highlight-color:transparent;
}
.mon-select-card:not(.mon-select-dim):hover{transform:translateY(-5px) scale(1.03);box-shadow:0 10px 30px rgba(231,76,60,.35);}
.mon-select-card:not(.mon-select-dim):active{transform:translateY(2px) scale(.96);box-shadow:0 2px 6px rgba(231,76,60,.2);}

/* 도감 몬스터 카드 눌림 */
.mon-card:hover:not(.locked){border-color:rgba(231,76,60,.48);transform:translateY(-2px);}
.mon-card:active:not(.locked){transform:translateY(2px) scale(.96) !important;}

/* 결과 */
.ba-result-box{border-radius:14px;padding:.9rem;margin-bottom:.8rem;text-align:center;}
.ba-result-win{background:rgba(217,164,65,.1);border:1.5px solid rgba(217,164,65,.35);}
.ba-result-lose{background:rgba(231,76,60,.08);border:1.5px solid rgba(231,76,60,.3);}

/* 애니메이션 유지 */
.ba-emoji{font-size:3.8rem;line-height:1;}
.ba-emoji.shake{animation:shake .4s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.ba-emoji.hit{animation:hitFlash .3s ease;}
@keyframes hitFlash{0%,100%{filter:none}50%{filter:brightness(3) saturate(0);}}
.ba-player-hit{animation:playerHit .35s ease;}
@keyframes playerHit{0%,100%{filter:none}50%{filter:brightness(2) hue-rotate(30deg);}}
.dmg-float{position:absolute;font-weight:900;font-size:1.3rem;pointer-events:none;
  animation:dmgFloat 1s ease forwards;}
@keyframes dmgFloat{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-50px) scale(1.2)}}
.btn-ok{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--bg0);
  font-family:'Noto Sans KR',sans-serif;font-weight:900;font-size:1rem;
  padding:.8rem 2.5rem;border:none;border-radius:50px;cursor:pointer;transition:all .2s;margin-top:.5rem;}
.btn-ok:hover{transform:scale(1.05);}
.btn-battle{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;
  font-family:'Noto Sans KR',sans-serif;font-weight:900;font-size:1rem;
  padding:.8rem 2.5rem;border:none;border-radius:50px;cursor:pointer;transition:all .2s;}
.btn-battle:hover{transform:scale(1.05);}.btn-battle:disabled{opacity:.5;cursor:default;transform:none;}

/* ── 전투 속성 이펙트 (레벨별) ── */
@keyframes skillNormal1{0%{opacity:1;transform:translateX(0)}50%{transform:translateX(8px)}100%{opacity:0;transform:translateX(20px)}}
@keyframes skillNormal2{0%{opacity:1;transform:scale(1)}50%{transform:scale(1.3)}100%{opacity:0;transform:scale(0)}}
@keyframes skillNormal3{0%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(2) rotate(30deg)}}
@keyframes skillFire1  {0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-30px) scale(.5)}}
@keyframes skillFire2  {0%{opacity:1;transform:scale(1)}50%{transform:scale(1.5)}100%{opacity:0;transform:scale(2.5)}}
@keyframes skillFire3  {0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(3.5) translateY(-20px)}}
@keyframes skillWater1 {0%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.3) translateY(15px)}}
@keyframes skillWater2 {0%{opacity:1;transform:scaleX(1)}50%{transform:scaleX(2)}100%{opacity:0;transform:scaleX(.5)}}
@keyframes skillWater3 {0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(3) translateY(-10px)}}
@keyframes skillGrass1 {0%{opacity:1;transform:rotate(0)}100%{opacity:0;transform:rotate(90deg) scale(.5)}}
@keyframes skillGrass2 {0%{opacity:1;transform:rotate(0) scale(1)}100%{opacity:0;transform:rotate(180deg) scale(1.5)}}
@keyframes skillGrass3 {0%{opacity:1;transform:scale(1)}50%{transform:scale(1.8) rotate(90deg)}100%{opacity:0;transform:scale(2.5) rotate(180deg)}}
/* 몬스터 피격 강조 */
@keyframes monHit{0%,100%{filter:none;transform:translateX(0)}25%{filter:brightness(4) saturate(0);transform:translateX(-8px)}75%{transform:translateX(4px)}}
@keyframes playerHit{0%,100%{filter:none;transform:translateX(0)}25%{filter:brightness(3) hue-rotate(180deg);transform:translateX(8px)}75%{transform:translateX(-4px)}}
.ba-mon-hit{animation:monHit .35s ease!important;}
.ba-player-hit{animation:playerHit .35s ease!important;}

/* 농장 */
.fm-cell{aspect-ratio:1;border-radius:5px;background:rgba(46,204,113,.08);
  border:1px solid rgba(46,204,113,.18);display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;cursor:pointer;transition:all .2s;position:relative;}
.fm-cell:hover{transform:scale(1.1);}
.fm-cell.ready{border-color:rgba(217,164,65,.5);background:rgba(217,164,65,.1);animation:farmPulse 1.5s ease-in-out infinite;}
.fm-cell.growing{border-color:rgba(46,204,113,.35);}
.fm-cell.withered{border-color:rgba(139,90,43,.5);background:rgba(139,90,43,.12);opacity:.75;}
.fm-prog{position:absolute;bottom:2px;left:2px;right:2px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.1);overflow:hidden;}
.fm-prog-fill{height:100%;background:linear-gradient(90deg,var(--emerald),#27AE60);}
.farm-seed-list{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem;}
.seed-chip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:.2rem .6rem;font-size:.75rem;cursor:pointer;transition:all .2s;}
.seed-chip:hover,.seed-chip.sel{border-color:var(--gold);color:var(--gold);}

/* 집 */
.house-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem;}
.house-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.9rem;}
.hs-label{font-size:.7rem;color:var(--txt3);margin-bottom:.4rem;}
.hs-value{font-size:1.4rem;font-weight:900;}
.hs-sub{font-size:.7rem;color:var(--txt2);margin-top:.15rem;}
.book-list{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem;max-height:160px;overflow-y:auto;}
.book-item{background:rgba(255,255,255,.04);border-radius:8px;padding:.45rem .7rem;font-size:.78rem;
  display:flex;align-items:center;gap:.5rem;}
.dex-chip{font-size:.78rem;background:rgba(231,76,60,.12);border:1px solid rgba(231,76,60,.2);
  border-radius:8px;padding:.2rem .55rem;display:inline-block;margin:.2rem;}

/* 인벤토리 */
.inv-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;}
.inv-slot{aspect-ratio:1;background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.08);
  border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;cursor:pointer;transition:all .2s;padding:.3rem;}
.inv-slot:hover{border-color:rgba(217,164,65,.35);}
.inv-slot.filled{border-color:rgba(217,164,65,.22);}
.inv-icon{font-size:1.5rem;}.inv-name{font-size:.6rem;color:var(--txt2);text-align:center;line-height:1.2;}
.inv-qty{font-size:.65rem;color:var(--gold);font-weight:700;}

/* 승급 모달 */
.promo-modal-inner{text-align:center;padding:.5rem;}
.promo-emoji{font-size:5rem;animation:floatY 3s ease-in-out infinite;display:block;margin:0 auto .8rem;}

/* 활동신청·독서 폼 */
.form-input-student{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:.55rem .8rem;color:var(--txt);font-size:.83rem;
  font-family:'Noto Sans KR',sans-serif;outline:none;box-sizing:border-box;}
.form-input-student:focus{border-color:rgba(217,164,65,.4);background:rgba(217,164,65,.05);}
.form-input-student option{background:#1a2535;color:var(--txt);}

/* 레벨업 FX */
.levelup-fx{display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.6);
  align-items:center;justify-content:center;flex-direction:column;gap:.8rem;backdrop-filter:blur(8px);}
.levelup-fx.show{display:flex;}
.lup-text{font-family:'Gowun Batang',serif;font-size:clamp(2.5rem,8vw,4.5rem);font-weight:700;
  background:linear-gradient(135deg,#D9A441,#B0762E,#D9A441);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 30px rgba(214,166,74,.8));text-align:center;
  animation:lupPop 2.8s ease forwards;}
.lup-sub{font-size:1.2rem;color:var(--txt);animation:lupPop 2.8s ease .1s forwards;opacity:0;}
.lup-promo{font-size:.9rem;color:var(--gold);margin-top:.3rem;animation:lupPop 2.8s ease .2s forwards;opacity:0;}
@keyframes lupPop{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.2)}60%{opacity:1;transform:scale(1)}90%{opacity:1}100%{opacity:0;transform:scale(1.1) translateY(-20px)}}
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.particle{position:absolute;width:8px;height:8px;border-radius:50%;animation:pFly 2s ease forwards;}
@keyframes pFly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}}

/* ── 태블릿 바텀 탭 ── */
.bottom-tabs{display:none;flex-shrink:0;background:rgba(13,13,26,.98);
  border-top:1px solid rgba(217,164,65,.15);padding:.4rem 0 max(.4rem, env(safe-area-inset-bottom));
  position:relative;z-index:500;pointer-events:auto;}
.bottom-tabs-inner{display:flex;justify-content:space-around;}
.btab{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.3rem .5rem;
  cursor:pointer;color:var(--txt3);transition:color .2s;min-width:50px;min-height:48px;
  justify-content:center;-webkit-tap-highlight-color:transparent;}
.btab.active{color:var(--gold);}
.btab-icon{font-size:1.3rem;}
.btab-label{font-size:.6rem;font-weight:600;}

/* 모바일 전용 캐릭터 패널 (탭으로 전환) */
/* ── 레이아웃 강제 모드 ── */
/* [HUDBTN-1] 주의: 아래 force-desktop 6줄은 지금 도달할 수 없다.
   이 클래스를 add하는 코드가 어디에도 없다(student.js의 applyLayout은 remove만 한다).
   그래서 '🖥️ 넓게 보기' 버튼은 이름이 말하는 일을 하지 못한다.
   나중에 토글을 제대로 붙일 때 쓸 자리라 남겨 둔다. 지우지 말 것. */
#s-game.force-desktop .side-panel  { display:flex!important; flex-direction:column; }
#s-game.force-desktop .main-area   { display:block!important; }
#s-game.force-desktop .mob-bottom-nav { display:none!important; }
#s-game.force-desktop .bottom-tabs { display:none!important; }
#s-game.force-desktop .mobile-char-panel { display:none!important; }
#s-game.force-desktop .main-tab-content  { display:block!important; }

#s-game.force-mobile .side-panel   { display:none!important; }
#s-game.force-mobile .main-area    { display:none!important; }
#s-game.force-mobile .mob-bottom-nav { display:flex!important; }
#s-game.force-mobile .bottom-tabs  { display:block!important; }
#s-game.force-mobile .mobile-char-panel { display:none; }
#s-game.force-mobile .mobile-char-panel.active-tab { display:block!important; }
#s-game.force-mobile .main-tab-content { display:none; }
#s-game.force-mobile .main-tab-content.active-tab { display:block!important; }

/* force-mobile일 때 game-body를 flex column으로 — 뷰포트 너비 무관하게 적용 */
#s-game.force-mobile .game-body {
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:unset!important;
  overflow:visible!important;
}
#s-game.force-mobile .main-tab-content.active-tab {
  flex:1;
  min-height:0;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:80px;
}
#s-game.force-mobile .mobile-char-panel.active-tab {
  flex:1;
  min-height:0;
  overflow-y:auto!important;
}


.mobile-char-panel.active-tab{display:block;}
.main-tab-content{display:none;padding:1.2rem;}
.main-tab-content.active-tab{
  display:block;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:80px;
  /* 바텀탭(65px) 영역 침범 방지 */
  max-height:calc(100svh - 52px - 65px);
  pointer-events:auto;
}

/* ── 태블릿 최적화 (768~1024px) ── */
@media (min-width:768px) and (max-width:1024px) {
  .modal { max-width:90vw!important; max-height:88vh; }
  /* 집/인테리어, 농장 모달은 태블릿에서 거의 전체화면 */
  #m-house .modal, #m-farm .modal { width:98vw!important; max-width:98vw!important; max-height:97vh!important; padding:1rem!important; }
  #m-house .modal { display:flex; flex-direction:column; overflow:hidden; }
  #m-house .house-tab-body { flex:1; overflow-y:auto; min-height:0; }
  .btn-sm { padding:.45rem 1rem!important; font-size:.84rem!important; }
  .menu-tile { padding:1.1rem .8rem!important; }
  .tile-icon { font-size:2rem!important; }
  .tile-name { font-size:.88rem!important; }
  .mtab { padding:.5rem 1rem!important; font-size:.85rem!important; }
  .mission-row { padding:.7rem .9rem!important; }
  .today-card { padding:.9rem!important; }
  canvas { touch-action:none; }
  #deco-canvas { max-width:100%!important; touch-action:none; }
  .cell-btn { width:52px!important; height:52px!important; font-size:.8rem!important; }
  #kiosk-table th { font-size:.85rem!important; padding:.6rem .4rem!important; }
  #kiosk-table td.quest-name { font-size:.88rem!important; min-width:160px!important; }
}

@media(max-width:700px){
  /* [HUDBTN-1] 폰에서는 상단 줄의 두 버튼을 뺀다.
     · 🖥️ 넓게 보기 — 700px 이하에서는 .side-panel이 어차피 숨겨져 데스크탑 배치가 나올 수 없고,
       force-desktop을 add하는 코드도 없다. 두 모바일 배치를 오갈 뿐인데 이름이 화면과 맞지 않는다.
     · 🔍 화면 맞춤 — 2560px 기준으로 깔고 축소하는 기능이라 375px에서 배율이 0.146이 된다(글자를 못 읽는다).
     빼도 잃는 기능이 없다. 배치는 폭에 따라 미디어쿼리가 고른다.
     이미 켜 둔 기기가 갇히지 않도록 student.js의 applyScale()에서 좁은 폭이면 스케일을 걷어낸다. */
  #layout-toggle-btn, #scale-mode-btn { display:none; }
  .game-body{
    grid-template-columns:1fr;
    overflow:visible;
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .side-panel{display:none;}
  .main-area{display:none;}
  .bottom-tabs{display:block;}
  /* 모바일에서 퀘스트 카드 버튼 줄바꿈 방지 */
  .mission-row { flex-wrap:nowrap; }
  .mission-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* 모바일 HUD EXP 폰트 축소 */
  .hud-exp-txt { font-size:.58rem; }
  .mobile-char-panel,.main-tab-content{
    flex:1;min-height:0;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
}
@media(min-width:701px){
  .bottom-tabs{display:none;}
  .mobile-char-panel,.main-tab-content{display:none!important;}
  .main-area{display:block;}
}

/* boss banner */
.boss-banner{background:linear-gradient(135deg,rgba(231,76,60,.15),rgba(192,57,43,.08));
  border:1px solid rgba(231,76,60,.4);border-radius:var(--r);padding:.9rem 1.1rem;
  margin-bottom:1.2rem;display:flex;align-items:center;gap:.9rem;cursor:pointer;
  animation:bossGlow 2s ease-in-out infinite;}
@keyframes bossGlow{0%,100%{box-shadow:0 0 10px rgba(231,76,60,.1)}50%{box-shadow:0 0 25px rgba(231,76,60,.3);}}
.bb-btn{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;
  font-size:.78rem;font-weight:700;padding:.4rem .9rem;border-radius:20px;
  font-family:'Noto Sans KR',sans-serif;border:none;cursor:pointer;flex-shrink:0;}
@keyframes achPop{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.ach-item{display:flex;align-items:center;gap:.9rem;padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.05);}
.ach-item:last-child{border-bottom:none;}
.ach-item.locked{opacity:.4;}
.ach-icon{font-size:1.8rem;width:40px;text-align:center;flex-shrink:0;}
.ach-body{flex:1;}
.ach-name{font-weight:700;font-size:.88rem;}
.ach-desc{font-size:.72rem;color:var(--txt2);margin-top:.1rem;}
.ach-reward{font-size:.7rem;color:var(--gold);margin-top:.2rem;}
.ach-badge{font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:10px;flex-shrink:0;}
.ach-badge.done{background:rgba(46,204,113,.2);color:var(--emerald);}
.ach-badge.locked{background:rgba(255,255,255,.06);color:var(--txt3);}

/* ══ [TOUCH-44] 손가락으로 누를 때만 버튼을 키운다 ════════════════
   기준 44×44px. @media (pointer: coarse) 안에서만 — 마우스 환경은 안 바뀐다.
   파일 맨 끝에 두어 앞의 기본 규칙을 순서로 이긴다.
   ══════════════════════════════════════════════════════════════ */
@media (pointer: coarse){
  /* student.css 에는 .btn-sm 기본 규칙이 아예 없었다 — 여기서 신설한다.
     student.js 의 '신청' 버튼처럼 인라인 padding 이 있어도 min-height 는 먹는다. */
  .btn-sm{min-height:44px;}
  /* 앱에서 가장 작은 누를 거리(17×27)인데 모달마다 하나씩 있어 가장 자주 쓴다.
     음수 margin 으로 옆 제목이 밀려나지 않게 한다. */
  .modal-close{padding:.55rem;margin:-.55rem;min-width:44px;min-height:44px;}
  .hud-ava{width:44px;height:44px;}
  /* student.css:958 의 .mtab{padding:...!important}(768~1024px 태블릿 구간)가
     여기를 이겨 40px 에 머문다. 그 자리를 넘으려면 여기도 !important 가 필요하다. */
  .mtab{padding:.62rem 1rem!important;min-height:44px;}
  .todo-btn{padding:.62rem 1rem;min-height:44px;}
  /* 접기/펼치기 라벨 — cursor:pointer 인데 세로가 16px 뿐이었다.
     padding 만으로는 44 에 못 미쳐 min-height 로 확실히 잡는다. */
  .panel-label{padding:.7rem 0;margin-bottom:0;min-height:44px;}
  /* [WORDS-1] 상단 두 버튼(넓게 보기 / 화면 맞춤). 700px 이하에서는 숨겨지므로
     실제로 커지는 곳은 태블릿 이상 터치 화면이다. */
  .hud-mini-btn{min-height:44px;}
}