/* ==========================================================================
   css/student-ui.css · 학생 화면 새 옷 (2026-10-13)
   base.css · extra.css 다음에 읽혀서 모양만 덮어쓴다 (학생 JS 구조는 그대로 · BUD 아이 화면 규칙도 유지)
   팔레트 : 붉은 로고(img/logo.png · 10-19 원장님 「로고 다시 이걸로 · 붉은색으로」)의 붉은색(#8e1531 · 10-18 엔 진보라 #35244f) + 금색 점(#dabe55) · 크림 배경 (전엔 자주빨강 #a51c3c · 관리자 회색과 구분) · 둥근 카드 · 부드러운 그림자
   ========================================================================== */
body:not(.admin){
  --ac:#8e1531; --ac2:#b8243f; --ac-soft:#f8e7eb; --ac-text:#5e0d20; --ac-rgb:142,21,49; --ac-line:#e6c6ce; --ac-tint:#fdf5f6; --chip:#f4ecee; --sun:#dabe55; --gold:#dabe55;
  --bg:#f8f6f2; --line:#e6e0ea; --txt:#1e1a2e; --txt2:#4a4458; --muted:#7d7189; --blue:var(--ac); --blue-d:var(--ac-text);
  --ok:#1a8f5a; --ok-soft:#e4f8ee; --card:0 6px 18px rgba(142,21,49,.08); --r:20px;
  background:var(--bg); color:var(--txt);
}
/* ---- 상단 바 ---- */
body:not(.admin) #topbar{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 22px}
body:not(.admin) .logo{background:linear-gradient(135deg,var(--ac),var(--ac2));border-radius:12px;box-shadow:0 4px 12px rgba(var(--ac-rgb),.3)}
body:not(.admin) .tb-nav{gap:2px;background:var(--chip);border-radius:14px;padding:4px}
body:not(.admin) .tb-nav button{border-radius:10px;padding:8px 14px;font-size:14px;color:var(--txt2)}
body:not(.admin) .tb-nav button:hover{background:#fff}body:not(.admin) .tb-nav button.on{background:#fff;color:var(--ac);box-shadow:0 2px 8px rgba(var(--ac-rgb),.15)}
body:not(.admin) .ask-btn{background:var(--ac);border-radius:12px;box-shadow:0 4px 12px rgba(var(--ac-rgb),.25)}
body:not(.admin) .end-btn{border-radius:12px}body:not(.admin) .icon-btn,body:not(.admin) .mode-badge{border-radius:10px}
body:not(.admin) .pts-chip{border-radius:14px;background:#fff7dc}
/* ---- 로그인 ---- */
body:not(.admin) .login-wrap{border-radius:28px;box-shadow:0 20px 50px rgba(var(--ac-rgb),.12);border:0}
/* 로그인 상자는 화면 세로 가운데 (세로로 긴 패드에서 위로 쏠려 보임 · 원장님 11-11) */
body:not(.admin) #app:has(> .login-wrap){display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:calc(100vh - 71px);min-height:calc(100dvh - 71px)}
body:not(.admin) #app > .login-wrap{margin:0 auto;width:100%}
body:not(.admin) .login-wrap input{border-radius:14px}body:not(.admin) .login-wrap input:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(var(--ac-rgb),.12)}
body:not(.admin) .big-btn{background:var(--ac);border-radius:16px;box-shadow:0 6px 16px rgba(var(--ac-rgb),.25)}body:not(.admin) .big-btn:hover{background:var(--ac-text)}
/* ---- 홈 머리 : 이름 + 큰 시계 ---- */
body:not(.admin) .dash-top{background:#fff;border-radius:24px;padding:18px 22px;box-shadow:var(--card);gap:16px}
body:not(.admin) .avatar.big{width:64px;height:64px;flex:0 0 64px;border-radius:22px;background:linear-gradient(135deg,var(--ac-soft),var(--ac-soft));box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--ac-line);overflow:hidden}
body:not(.admin) .avatar.big img{width:100%;height:100%;object-fit:cover}
body:not(.admin) .dash-name h1{font-size:24px;letter-spacing:-.3px}
body:not(.admin) .pill{border-radius:10px;padding:3px 9px;background:var(--chip);color:var(--txt2)}body:not(.admin) .pill.lv{background:var(--ac-soft);color:var(--ac);font-weight:700}
body:not(.admin) .big-timer{background:linear-gradient(120deg,var(--ac),var(--ac2));border-radius:22px;box-shadow:0 10px 26px rgba(var(--ac-rgb),.28);margin:0;flex:1 1 320px}
body:not(.admin) .bt-main b{font-size:40px}body:not(.admin) .bt-main b.paused{color:#ffd166}
body:not(.admin) .sj{background:rgba(255,255,255,.14);border-radius:14px;border-color:transparent}
body:not(.admin) .sj.on{background:rgba(255,255,255,.28);border-color:#fff}body:not(.admin) .sj.over{border-color:#ffd166}
/* ---- 다음 할 것 · 숙제 상자 ---- */
body:not(.admin) .next-btn{background:#fff;color:var(--txt);border-radius:18px;padding:16px 20px;box-shadow:var(--card);border:2px solid var(--ac);margin-top:16px}
body:not(.admin) .next-btn:hover{background:var(--ac-tint)}body:not(.admin) .next-btn span b{color:var(--ac)}body:not(.admin) .next-btn.done{background:var(--ok-soft);border-color:#bfe8cf;color:var(--ok)}
body:not(.admin) .hw-box{background:#fff;border:0;border-left:6px solid var(--sun);border-radius:var(--r);box-shadow:var(--card);padding:14px 18px;margin-top:16px}
body:not(.admin) .hw-head{font-size:16px}body:not(.admin) .hw-head .pill{background:#fff5dc;color:#c47a00}
/* ---- 교재 카드 · 칸 ---- */
body:not(.admin) .track-list{margin-top:16px;display:flex;flex-direction:column;gap:14px}
body:not(.admin) .track-card{border:0;border-left:0;border-radius:var(--r);box-shadow:var(--card);padding:18px 20px;position:relative}
body:not(.admin) .track-card::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:5px;border-radius:0 6px 6px 0;background:var(--c)}
body:not(.admin) .track-card.done{background:#fff}body:not(.admin) .track-card.paper{background:#fff}
body:not(.admin) .t-book{border-radius:9px;padding:3px 10px;font-weight:800;font-size:12px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);border:0}
body:not(.admin) .tk-head b{font-size:17px}body:not(.admin) .row-title b{font-size:16px}
body:not(.admin) .row-no{background:var(--ac);border-radius:9px}
body:not(.admin) .steps{gap:6px}
body:not(.admin) .step{background:#faf9fe;border-radius:14px;padding:9px 12px}
body:not(.admin) .st-ico{width:26px;height:26px;border-color:#ddd9f0;background:#fff;color:#9a95bb}
body:not(.admin) .step.done{background:#fff;color:#6b6591}body:not(.admin) .step.done .st-ico{background:var(--ok);border-color:var(--ok);color:#fff}
body:not(.admin) .step.doing{background:#fff8ea}body:not(.admin) .step.doing .st-ico{background:var(--sun);border-color:var(--sun)}
body:not(.admin) .step.off.next{background:#fff;border:2px solid var(--ac);box-shadow:0 6px 16px rgba(var(--ac-rgb),.12)}
body:not(.admin) .step.off.next .st-ico{background:var(--ac);border-color:var(--ac)}
body:not(.admin) .step.off.hw{background:#fff8ea;border:1.5px solid #ffe2a8}body:not(.admin) .step.off.hw .st-ico{background:var(--sun);border-color:var(--sun)}
body:not(.admin) .step.off.hwcheck{background:#eef3ff;border:1.5px solid #cfe0ff}
body:not(.admin) .step.off.retest{background:#ffe9e9;border:1.5px solid #f5c2c2}
body:not(.admin) .step.app.todo .st-ico{background:var(--ac);border-color:var(--ac)}
body:not(.admin) .st-label b{color:var(--ac)}
body:not(.admin) .st-tag{border-radius:6px;font-size:10.5px;padding:2px 7px}
body:not(.admin) .st-tag.kit{background:#e8f1ff;color:#1d4ed8;border:0}body:not(.admin) .st-tag.book{background:#fff3d8;color:#7a5200;border:0}body:not(.admin) .st-tag.card{background:#e4f8ee;color:#1a8f5a;border:0}
body:not(.admin) .go-btn{background:var(--ac);border-radius:12px;padding:7px 14px;box-shadow:0 3px 10px rgba(var(--ac-rgb),.2)}
body:not(.admin) .go-btn.later{background:#fff;color:var(--ac);border:1.5px solid var(--ac-line);box-shadow:none}body:not(.admin) .go-btn.done{background:var(--chip);color:var(--txt2);box-shadow:none}
body:not(.admin) .go-btn.grant{background:#ff7a3d}
body:not(.admin) .tick{border-radius:12px;border-color:var(--line);color:var(--txt2)}body:not(.admin) .tick.on{background:var(--ok);border-color:var(--ok)}
body:not(.admin) .tick.key{background:var(--ac2);border-color:var(--ac2);color:#fff}body:not(.admin) .tick.key.ask{background:var(--ac);border-color:var(--ac)}
body:not(.admin) .tick.submit{background:#fff5dc;border-color:#ffd166;color:#7a5200}body:not(.admin) .tick.check{background:#e8f1ff;border-color:#8fb6ee;color:#1d4ed8}
body:not(.admin) .mini{border-radius:9px;border-color:var(--line)}body:not(.admin) .mini.link{border-radius:9px}
/* ---- 활동 카드 · 오답 · 기록 ---- */
body:not(.admin) .act-card{border:0;border-radius:var(--r);box-shadow:var(--card)}body:not(.admin) .act-card:hover{background:var(--ac-tint);box-shadow:0 10px 26px rgba(var(--ac-rgb),.14)}
body:not(.admin) .act-card .a-state{border-radius:10px}body:not(.admin) .act-card.done .a-state{background:var(--ok-soft);color:var(--ok)}
body:not(.admin) .acts{border-radius:var(--r)}body:not(.admin) .act:hover{background:var(--ac-tint)}
body:not(.admin) .wr-item{border:0;border-radius:var(--r);box-shadow:var(--card)}
body:not(.admin) .rep tr.chrow td{background:var(--ac-soft);color:var(--ac)}body:not(.admin) .rep tr.lvrow td{background:var(--ac)}
body:not(.admin) .col,body:not(.admin) .book-card{border:0;border-radius:var(--r);box-shadow:var(--card)}
/* ---- 팝업 ---- */
body:not(.admin) .modal{background:rgba(36,31,61,.45);backdrop-filter:blur(3px)}
body:not(.admin) .modal-box{border-radius:26px;padding:26px 28px;box-shadow:0 24px 60px rgba(36,31,61,.25)}
body:not(.admin) .call-pop h2{color:var(--txt)}body:not(.admin) .call-pop.leave h2{color:var(--ok)}
body:not(.admin) .ghost-btn{border-radius:12px}
body:not(.admin) .bye{background:#fff;border-radius:28px;box-shadow:var(--card);padding:40px 20px;max-width:560px;margin:6vh auto;text-align:center}
/* ---- BUD 아이 화면 (큰 카드) ---- */
body.kids .step.kd-now{border-color:var(--ac);box-shadow:0 10px 28px rgba(var(--ac-rgb),.18);border-radius:22px}
body.kids .track-card{border-radius:24px}body.kids .hw-box{border-radius:22px}
body.kids .kd-done,body.kids .step.kd-did{background:#fff;border-color:#e3f3e8}
/* ---- 작은 화면 ---- */
@media (max-width:760px){body:not(.admin) .dash-top{padding:14px}body:not(.admin) .track-card{padding:14px}body:not(.admin) .tb-nav{display:flex}}

/* ======================= 레이아웃 : 왼쪽 사이드바 (900px 이상) ======================= */
@media (min-width:900px){
  body:not(.admin) #topbar{position:fixed;left:0;top:0;bottom:0;width:236px;flex-direction:column;align-items:stretch;gap:16px;padding:22px 16px;border-right:1px solid var(--line);border-bottom:0;background:#fff;overflow:auto;flex-wrap:nowrap}
  body:not(.admin) .tb-left{gap:12px}body:not(.admin) #topbar .logo-img{height:auto;width:100%;max-width:210px}
  body:not(.admin) .tb-nav{flex-direction:column;background:none;padding:0;margin:6px 0 0;gap:4px}
  body:not(.admin) .tb-nav button{text-align:left;padding:12px 14px;font-size:15px;border-radius:12px;display:flex;align-items:center;gap:10px}
  body:not(.admin) .tb-nav button::before{font-size:18px}
  body:not(.admin) .tb-nav button[data-go=home]::before{content:"📚"}body:not(.admin) .tb-nav button[data-go=wrong]::before{content:"📒"}body:not(.admin) .tb-nav button[data-go=report]::before{content:"📈"}
  body:not(.admin) .tb-nav button.on{background:var(--ac-soft);color:var(--ac);box-shadow:none}
  body:not(.admin) .tb-right{margin:auto 0 0;flex-direction:column;align-items:stretch;gap:8px}
  body:not(.admin) .tb-right>*{width:100%;box-sizing:border-box;text-align:center;margin:0}
  body:not(.admin) .ask-btn{padding:12px;font-size:15px;border-radius:14px}
  body:not(.admin) .pts-chip{justify-content:center;padding:8px 12px;font-size:16px}
  body:not(.admin) .timer{display:block;background:var(--ac-tint);border-radius:12px;padding:8px;font-weight:800;color:var(--ac)}
  body:not(.admin) #whoami{padding:6px 0;font-size:15px}
  body:not(.admin) .end-btn{padding:12px;border-radius:14px;font-size:15px}
  body:not(.admin) .icon-btn{width:auto;align-self:flex-end}
  body:not(.admin) #app{margin-left:236px;max-width:none;padding:28px 40px 80px}
  body:not(.admin) #app:has(> .login-wrap){min-height:100vh;min-height:100dvh}   /* 로그인 : 왼쪽 띠가 있어도 상자는 화면 한가운데 (가로 패드 · 11-11) */
  body:not(.admin) #app > .login-wrap{position:relative;left:-118px}
  body:not(.admin) .page-head{margin-bottom:22px}
}
/* ---- 칸 = 타임라인 ---- */
body:not(.admin) .steps{position:relative;gap:4px}
body:not(.admin) .steps::before{content:"";position:absolute;left:24px;top:14px;bottom:14px;width:2px;background:#e9e6f6;border-radius:2px}
body:not(.admin) .step{background:transparent;position:relative;padding:8px 12px}
body:not(.admin) .step .st-ico{position:relative;z-index:1;box-shadow:0 0 0 3px #fff}
body:not(.admin) .step.done{background:transparent}
body:not(.admin) .step.off.next,body:not(.admin) .step.off.hw,body:not(.admin) .step.off.hwcheck,body:not(.admin) .step.off.retest,body:not(.admin) .step.doing{background:#fff;border-radius:16px;padding:12px 14px;box-shadow:var(--card)}
body:not(.admin) .step.off.next{border:2px solid var(--ac)}
body:not(.admin) .step.off.wait{opacity:.6}
body.kids .steps::before{left:28px}

/* ---- 아바타 ---- */
body:not(.admin) .av-btn{border:0;background:none;padding:0;cursor:pointer;border-radius:22px}body:not(.admin) .av-btn:hover .avatar{transform:scale(1.05)}
body:not(.admin) .avatar.big{transition:transform .12s}
body:not(.admin) .who-av{width:30px;height:30px;border-radius:50%;vertical-align:middle;margin-right:4px}
@media (min-width:900px){body:not(.admin) #whoami{display:flex;align-items:center;justify-content:center;gap:6px}body:not(.admin) .who-av{width:38px;height:38px}}

/* ---- 사이드바 내 교재 목록 ---- */
#sideBooks{display:none}
@media (min-width:900px){
  #sideBooks{display:block;margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
  .sb-title{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.4px;margin:0 0 6px 6px}.sb-title small{background:var(--chip);border-radius:8px;padding:1px 6px;margin-left:4px;font-size:11px}
  .sb-item{display:flex;gap:9px;align-items:center;width:100%;border:0;background:none;text-align:left;padding:8px 8px;border-radius:12px;cursor:pointer;color:var(--txt);margin-bottom:2px}
  .sb-item:hover{background:var(--ac-tint)}.sb-item.on{background:var(--ac-soft)}.sb-item.on b{color:var(--ac)}.sb-item.rest{opacity:.55}.sb-item.rest .sb-bar{display:none}
  .sb-ico{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--c,var(--ac)) 14%,#fff);display:grid;place-items:center;font-size:15px;flex:none}
  .sb-txt{min-width:0;flex:1}.sb-txt b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sb-txt small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sb-bar{display:block;height:4px;background:#ecebf5;border-radius:3px;margin-top:4px;overflow:hidden}.sb-bar i{display:block;height:100%;background:var(--c,var(--ac));border-radius:3px}
  .sb-next{font-style:normal;color:var(--ac);font-size:10px}.sb-item.all .sb-ico{background:var(--chip)}
  .book-strip{display:none}
}
/* 좁은 화면 : 칩 줄 */
@media (max-width:899px){.book-strip{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 2px}}
.bs-chip{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;color:var(--txt2)}.bs-chip.on{background:var(--ac);color:#fff;border-color:var(--ac)}.bs-chip.rest{opacity:.5}
/* ---- 오늘의 공통 활동 ---- */
body:not(.admin) .common-box{background:#fff;border:0;border-left:6px solid #6cc1ff;border-radius:var(--r);box-shadow:var(--card);padding:14px 18px;margin-top:16px}
body:not(.admin) .common-box .steps::before{display:none}body:not(.admin) .common-box .step{background:#faf9fe;border-radius:14px}
body:not(.admin) .common-box .step.off.next{border:2px solid #6cc1ff;background:#fff}body:not(.admin) .common-box .step.off.next .st-ico{background:#6cc1ff;border-color:#6cc1ff}
body:not(.admin) .common-box .kd-ico{font-size:18px;margin-right:6px}
/* ---- Daily Routine (사이드바 항목 · 카드) ---- */
.sb-item.daily{background:#fff7dc;border:1.5px solid #ffe2a8}.sb-item.daily.on{background:#ffefc2;border-color:#ffb21a}.sb-item.daily.done{background:#f3fbf6;border-color:#cfeedd}.sb-item.daily .sb-ico{background:#fff}
.sb-gap{height:10px}
body:not(.admin) .common-box{border-left-color:#ffb21a}body:not(.admin) .common-box.done{border-left-color:#1a8f5a}
body:not(.admin) .common-box .step.off.next{border-color:#ffb21a}body:not(.admin) .common-box .step.off.next .st-ico{background:#ffb21a;border-color:#ffb21a}
/* ---- 시계 아래 : 오늘 걸린 시간 (Daily Routine · 교재별) ---- */
body:not(.admin) .big-timer{flex-wrap:wrap}
body:not(.admin) .bt-split{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px solid rgba(255,255,255,.18);padding-top:10px;margin-top:4px}
body:not(.admin) .bs-t{font-size:11.5px;opacity:.75;margin-right:4px}
body:not(.admin) .bs-i{background:rgba(255,255,255,.14);border-radius:10px;padding:4px 10px;font-size:12.5px;white-space:nowrap}body:not(.admin) .bs-i b{margin-left:2px}
body:not(.admin) .bs-i.on{background:#fff;color:var(--ac);font-weight:800}body:not(.admin) .bs-i.zero{opacity:.55}
/* ---- 하원 허락 배너 ---- */
body:not(.admin) .leave-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:2px solid #ffb21a;border-radius:var(--r);padding:12px 16px;margin-bottom:14px;box-shadow:var(--card);font-size:15px}
body:not(.admin) .leave-banner .big-btn{padding:10px 18px;font-size:15px;margin:0;width:auto;flex:none}
/* 🎯 레벨테스트 카드 (신입생 · 10-13) */
body:not(.admin) .plt-card{display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,var(--ac),var(--ac2));color:#fff;border-radius:22px;padding:22px 26px;margin:16px 0;box-shadow:0 12px 30px rgba(var(--ac-rgb),.25)}
body:not(.admin) .plt-card .plt-ico{font-size:52px;flex:none}body:not(.admin) .plt-card .plt-body{flex:1}body:not(.admin) .plt-card b{font-size:20px;display:block;margin-bottom:4px}
body:not(.admin) .plt-card .muted{color:rgba(255,255,255,.85);font-size:14px;line-height:1.5}
body:not(.admin) .plt-card .plt-lv{color:rgba(255,255,255,.9);font-size:16px;font-weight:600}
body:not(.admin) .plt-card .big-btn{width:auto;flex:none;margin:0;white-space:nowrap;background:#ffd166;color:#3a2d00;font-size:19px;padding:16px 30px;border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.15)}
body:not(.admin) .plt-card.done{background:#fff;color:var(--txt);border:2px solid var(--ac-line);box-shadow:none}body:not(.admin) .plt-card.done .muted{color:#6b6591}
@media (max-width:640px){body:not(.admin) .plt-card{flex-direction:column;text-align:center}body:not(.admin) .plt-card .big-btn{width:100%}}
/* 📝 시험 칸 안내 (진단 평가 · 중간 시험 … · 10-13) : 칸 아래 전체 폭 */
body:not(.admin) .jc-guide{grid-column:1/-1;background:#fff8e6;border:1.5px solid #f5d58a;border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.6;text-align:left;color:#3a2d00}
body:not(.admin) .jc-guide b{display:block;margin-bottom:4px;font-size:15px}body:not(.admin) .jc-guide small{font-weight:500;color:#a5720a;margin-left:6px}body:not(.admin) .jc-guide ol{margin:0;padding-left:22px}
body.kids .step.kd-now .st-label{order:0}body.kids .step.kd-now .jc-guide{order:1;font-size:17px;padding:14px 18px}body.kids .step.kd-now .jc-guide b{font-size:19px}body.kids .step.kd-now .tick.key.ask{order:2}
/* ---- 하원 전에 할 일(재시험) · 단어 시험 결과 (왼쪽 목록 맨 위 · 10-21) ---- */
.sb-title.todo{color:#c2410c}
.sb-item.todo-retest{background:#fff1ec;border:1.5px solid #ffc9b3}.sb-item.todo-retest b{color:#c2410c}.sb-item.todo-retest .sb-ico{background:#fff}
.sb-item.wt-pass,.sb-item.wt-retestDone{background:#f0faf3;border:1.5px solid #cfeedd;cursor:default}.sb-item.wt-pass b,.sb-item.wt-retestDone b{color:#1a7f4b}.sb-item.wt-pass .sb-ico,.sb-item.wt-retestDone .sb-ico{background:#fff}
.sb-item.wt-wait{background:#f6f4fb;border:1.5px dashed #d9d2e8;cursor:default}.sb-item.wt-wait .sb-ico{background:#fff}
.retest-banner.flash{animation:rtflash 1.6s}
@keyframes rtflash{0%,100%{box-shadow:none}30%,70%{box-shadow:0 0 0 4px #ffb08a}}
/* 🔁 밀린 재시험 알림 (10-24) */
body .leave-banner.retest-banner.old{background:#fff0f0!important;border:2px solid #d93a3a!important;box-shadow:0 0 0 4px rgba(217,58,58,.12)}
.rt-gate .hwg-item{border-color:#f0b4b4;background:#fff7f7}