/* ===== 잉글리시 스텝 (English Step) 공통 스타일 ===== */
:root{
  --bg:#eef3fa;
  --panel:#ffffff;
  --chat-bg:#dce9f7;
  --line:#dbe3ee;
  --txt:#1f2a37;
  --muted:#7b8794;
  --blue:#2f86f6;
  --blue-d:#1b6fd6;
  --green:#57bd4a;
  --red:#e04b4b;
  --violet:#7c5cff;
  /* 강조색 (학생 = 로고 진보라 · 관리자 = 회색 · 10-18) : student-ui.css / admin-ui.css 가 덮어쓴다 */
  --ac:#8e1531; --ac2:#b8243f; --ac-soft:#f8e7eb; --ac-text:#5e0d20; --ac-rgb:142,21,49; --ac-line:#e6c6ce; --ac-tint:#fdf5f6; --chip:#f4ecee; --txt2:#4a4458;
  --radius:14px;
  --shadow:0 2px 10px rgba(31,42,55,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Pretendard","맑은 고딕","Malgun Gothic",system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--txt); font-size:16px; line-height:1.6;
}
button{font-family:inherit;cursor:pointer}
.hidden{display:none !important}

/* ---------- top bar ---------- */
#topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  padding:10px 22px; background:#fff; border-bottom:1px solid var(--line);
}
.tb-left{display:flex;align-items:center;gap:10px}
.logo{
  width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:19px;
}
/* 로고 그림 (img/logo.png · 10-19 원장님 붉은 로고로 되돌림 · 10-18 엔 logo.svg) : 상단 바 · 로그인 상자 */
.logo-img{height:50px;width:auto;display:block}.logo-img.big{height:auto;width:min(340px,86%);margin:0 auto 16px}   /* 10-18 「로고가 너무 작아」 : svg 빈 여백 잘라냄 + 키움 */
.tb-title.sr{display:none}   /* 학생 상단 바 : 로고에 이름이 있어 글자는 숨김 */
.tb-title strong{display:block;font-size:17px;line-height:1.1}
.tb-title small{color:var(--muted);font-size:11px;letter-spacing:.06em}
.tb-nav{display:flex;gap:4px;margin-left:14px}
.tb-nav button{
  border:0;background:none;padding:9px 14px;border-radius:9px;
  font-size:15px;color:#55606d;font-weight:600;
}
.tb-nav button:hover{background:#f1f5fa}
.tb-nav button.on{color:var(--blue);background:#eaf3ff}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
#whoami{font-weight:700;font-size:14px}
#whoami em{font-style:normal;color:var(--muted);font-weight:500}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 9px;font-size:15px}
.icon-btn.off{opacity:.35}
.ghost-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 12px;font-size:13px;color:#55606d}
.ghost-btn:hover{background:#f6f8fb}

/* ---------- layout ---------- */
#app{max-width:1080px;margin:0 auto;padding:26px 20px 80px}
.page-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:26px}
.page-head p{margin:0;color:var(--muted);font-size:14px}
.spacer{flex:1}

/* ---------- login ---------- */
.login-wrap{max-width:430px;margin:8vh auto;background:#fff;border-radius:20px;
  padding:34px 30px;box-shadow:var(--shadow);text-align:center}
.login-wrap h1{margin:6px 0 4px;font-size:28px}
.login-wrap .sub{color:var(--muted);font-size:14px;margin-bottom:22px}
.login-wrap input{
  width:100%;padding:13px 14px;border:1.6px solid var(--line);border-radius:11px;
  font-size:16px;text-align:center
}
.login-wrap input:focus{outline:none;border-color:var(--blue)}
.big-btn{
  width:100%;margin-top:12px;padding:13px;border:0;border-radius:11px;
  background:var(--blue);color:#fff;font-size:16px;font-weight:700
}
.big-btn:hover{background:var(--blue-d)}
.recent{margin-top:22px;text-align:left}
.recent h4{margin:0 0 8px;font-size:13px;color:var(--muted)}
.recent-list{display:flex;flex-wrap:wrap;gap:7px}
.recent-list button{
  border:1px solid var(--line);background:#f7f9fc;border-radius:20px;
  padding:6px 13px;font-size:13px
}
.recent-list button:hover{border-color:var(--blue);color:var(--blue)}
.note{font-size:12px;color:var(--muted);margin-top:18px;line-height:1.5}

/* ---------- unit cards ---------- */
.unit{margin-bottom:16px}
.unit-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.tag{background:#dbeafe;color:#1f6fd0;font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:20px}
.unit-top h3{margin:0;font-size:18px}
.unit-top .done-pill{margin-left:auto;font-size:12px;color:var(--muted)}
.acts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:#fff;border:1.5px solid #cfe0f5;border-radius:var(--radius);overflow:hidden
}
.act{
  padding:16px 10px;text-align:center;border-right:1px solid var(--line);
  background:none;border-top:0;border-bottom:0;border-left:0;
}
.act:last-child{border-right:0}
.act:hover{background:#f4f9ff}
.act b{display:block;font-size:15px}
.act span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.act .sc{font-weight:800;font-size:12px}
.sc.pass{color:var(--green)} .sc.fail{color:var(--red)} .sc.none{color:#c3ccd6}
.act.locked{opacity:.45;cursor:not-allowed}
.arrow-down{text-align:center;color:#bfd2ea;font-size:13px;margin:6px 0}

/* ---------- round select ---------- */
.round-wrap{max-width:720px;margin:10px auto}
.round-wrap .rtitle{text-align:center;margin-bottom:28px}
.round-wrap .rtitle h2{margin:0 0 4px;font-size:28px}
.round-wrap .rtitle p{margin:0;color:var(--muted)}
.round{
  display:flex;align-items:center;gap:14px;padding:20px 22px;margin-bottom:12px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);
  width:100%;text-align:left;font-size:16px
}
.round .badge{background:var(--blue);color:#fff;border-radius:9px;padding:6px 13px;font-weight:700;font-size:14px}
.round.on{background:var(--blue);border-color:var(--blue);color:#fff}
.round.on .badge{background:#fff;color:var(--blue)}
.round.off{background:#f2f4f7;border-color:#f2f4f7;color:#a9b2bd;cursor:default}
.round.off .badge{background:#cfd6de;color:#fff}
.round .go{margin-left:auto;font-weight:700}
.reset-line{text-align:center;color:var(--muted);font-size:13px;margin-top:26px}
.reset-line a{color:var(--red);text-decoration:underline;cursor:pointer}

/* ---------- runner shell ---------- */
.run-head{
  display:flex;align-items:center;gap:10px;padding:4px 0 12px;
}
.run-head .mid{flex:1;text-align:center;color:var(--muted);font-size:14px;font-weight:600}
.progress{height:6px;background:#e3e9f1;border-radius:6px;overflow:hidden;margin-bottom:26px}
.progress i{display:block;height:100%;background:var(--blue);transition:width .25s}

/* ---------- concept talk ---------- */
.talk{background:var(--chat-bg);border-radius:16px;padding:26px 22px;min-height:60vh}
.talk-banner{
  display:block;margin:0 auto 24px;background:#98a5b3;color:#fff;font-weight:700;
  padding:10px 26px;border-radius:26px;width:max-content;font-size:15px
}
.row{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start}
.avatar{width:42px;height:42px;border-radius:50%;background:#fff;flex:0 0 42px;
  display:grid;place-items:center;font-size:22px;border:1px solid #cfdcec}
.bubble{
  background:#fff;border-radius:12px;padding:11px 16px;max-width:760px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.bubble.plain{background:none;box-shadow:none;padding:11px 6px}
.bubble .ko-tr{display:block;font-size:13px;color:#5b6672;margin-top:3px}
.spk{border:0;background:none;color:#8fa0b3;font-size:14px;padding:0 6px 0 0;cursor:pointer}
.spk:hover{color:var(--blue)}
.enter-hint{color:var(--blue);font-size:14px;margin:10px 0 0 52px;text-decoration:underline;
  background:none;border:0;padding:0}
.blank{
  display:inline-block;min-width:74px;padding:2px 10px;margin:0 3px;
  border:1.5px solid var(--green);border-radius:6px;background:#fff;
  text-align:center;font-weight:700
}
.blank.hole{border-color:transparent;background:#7fb2ee;color:transparent}
.blank.wrong{border-color:var(--red);color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px 52px;align-items:center}
.chip{
  border:1.5px solid #c9b6f5;background:#fff;color:#4b3f7a;border-radius:8px;
  padding:7px 13px;font-weight:700;font-size:15px;position:relative
}
.chip sup{font-size:10px;color:#9d8ec9;margin-right:2px}
.chip:hover{background:#f4efff}
.chip.used{opacity:.3;pointer-events:none}
.redo{border:1.5px solid var(--line);background:#fff;border-radius:50%;width:34px;height:34px}
.qbox{margin:18px 0 22px 0}
.qbox .qhead{display:flex;gap:10px;align-items:flex-start}
.qmark{width:34px;height:34px;border-radius:50%;background:#222;color:#fff;
  display:grid;place-items:center;font-weight:700;flex:0 0 34px}
.qopts{margin:10px 0 0 44px}
.qopt{display:flex;gap:9px;align-items:center;padding:5px 0;background:none;border:0;
  font-size:15px;text-align:left;color:#5b6672;width:100%}
.qopt i{width:22px;height:22px;border-radius:50%;border:1.4px solid #c3ccd6;color:#98a5b3;
  display:grid;place-items:center;font-size:12px;font-style:normal;flex:0 0 22px}
.qopt.ok{color:var(--green);font-weight:700}
.qopt.ok i{border-color:var(--green);background:var(--green);color:#fff}
.qopt.no{color:var(--red)}
.qopt.no i{border-color:var(--red);background:var(--red);color:#fff}

/* ---------- quiz ---------- */
.qwrap{max-width:840px;margin:0 auto}
.qtop{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.qchar{width:76px;height:76px;flex:0 0 76px;border-radius:16px;background:#eaf3ff;
  display:grid;place-items:center;font-size:38px}
.qno{display:inline-block;background:#dbeafe;color:#1f6fd0;font-weight:800;
  border-radius:8px;padding:2px 11px;font-size:14px;margin-bottom:5px}
.qno.wrongno{background:#fdd;color:var(--red)}
.qno.rightno{background:#dcf5d8;color:#3f9a35}
.qdir{font-weight:700;font-size:16px}
.qko{background:#fff;border:1.5px solid #cfe0f5;border-radius:10px;padding:12px 16px;margin:16px 0}
.qtext{font-size:19px;line-height:2.4;white-space:pre-wrap;margin:14px 0}
.inp{
  border:1.5px solid #bcd3ee;border-radius:7px;padding:5px 8px;font-size:17px;
  width:130px;text-align:center;font-family:inherit
}
.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #dbeafe}
.inp.ok{border-color:var(--green);background:#f3fbf2}
.inp.no{border-color:var(--red);background:#fdf3f3;color:var(--red)}
.opts{display:flex;flex-direction:column;gap:9px;margin:16px 0}
.opt{
  background:#dceaf9;border:0;border-radius:9px;padding:13px 18px;text-align:left;
  font-size:16px;display:flex;align-items:center;gap:10px
}
.opt:hover{background:#cfe2f7}
.opt.sel{background:#b9d6f5;box-shadow:inset 0 0 0 2px var(--blue)}
.opt.ok{background:var(--green);color:#fff}
.opt.no{background:var(--red);color:#fff}
.opt .mark{margin-left:auto;font-weight:700}
.qbtns{display:flex;gap:10px;align-items:center;margin-top:20px}
.btn{border:0;border-radius:22px;padding:11px 26px;font-size:15px;font-weight:700}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-d)}
.btn.line{background:#fff;border:1.5px solid var(--line);color:#55606d}
.btn.ok{background:var(--green);color:#fff}
.btn.ai{background:linear-gradient(90deg,#8a5cf6,#4f7bf7);color:#fff}
.keyhint{font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.08em}
.hintbox{background:#fffbe8;border:1px solid #f0e0a8;border-radius:9px;padding:10px 14px;
  margin-top:14px;font-size:14px}

/* ---------- result ---------- */
.res-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.switch{display:flex;align-items:center;gap:8px;font-size:14px;color:#55606d}
.sw{width:44px;height:24px;border-radius:20px;background:#cfd6de;position:relative;border:0}
.sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
.sw.on{background:var(--blue)} .sw.on i{left:23px}
.res-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.res-ans{margin-top:10px;font-size:15px}
.res-ans .mine{color:var(--red);font-weight:700}
.res-ans .real{color:var(--green);font-weight:700}
.explain{background:#f4f8fd;border-left:3px solid var(--blue);border-radius:0 8px 8px 0;
  padding:10px 14px;margin-top:10px;font-size:14.5px;color:#3b4754}
.scorebar{
  position:sticky;bottom:0;display:flex;align-items:center;gap:12px;
  background:#f4f6f9;border-top:1px solid var(--line);padding:14px 20px;margin:20px -20px -80px;
}
.scorebar .big{font-size:24px;font-weight:800}
.scorebar .big.pass{color:var(--green)} .scorebar .big.fail{color:var(--red)}
.scorebar .msg{color:#55606d;font-size:14px}
.scorebar .spacer{flex:1}

/* ---------- wrong note ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.filters select,.filters input{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:14px;font-family:inherit}
.stat{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.stat div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 18px;min-width:110px}
.stat b{display:block;font-size:22px}
.stat span{font-size:12px;color:var(--muted)}
.wr-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px}
.wr-meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:8px;flex-wrap:wrap}
.pill{background:#eef2f7;border-radius:20px;padding:2px 10px;font-size:11.5px;color:#55606d}
.pill.act-exam{background:#ffe9e9;color:#c33}
.pill.act-practice{background:#e6f2ff;color:#1f6fd0}
.pill.act-concept{background:#f0eaff;color:#6b46d6}
.pill.cnt{background:#fff3d8;color:#a5720a}
.wr-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mini{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-size:13px;color:#55606d}
.mini:hover{background:#f6f8fb}
.mini.on{background:#eaf3ff;border-color:var(--blue);color:var(--blue)}
.empty{text-align:center;color:var(--muted);padding:60px 0}

/* ---------- report ---------- */
table.rep{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);font-size:14px}
table.rep th,table.rep td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:center}
table.rep th{background:#f6f8fb;font-size:13px;color:#55606d}
table.rep td.left{text-align:left;font-weight:600}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(20,28,38,.45);display:grid;place-items:center;z-index:100}
.modal-box{background:#fff;border-radius:16px;padding:24px 26px;width:min(520px,92vw);max-height:86vh;overflow:auto}
.modal-box h3{margin:0 0 14px}
.modal-box label{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:15px}
.modal-box .row-btn{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

@media (max-width:760px){
  .acts{grid-template-columns:repeat(2,1fr)}
  .act{border-bottom:1px solid var(--line)}
  .tb-nav{margin-left:0}
  #topbar{flex-wrap:wrap;gap:10px}
  .qtext{font-size:17px}
}

/* ---------- chapter ---------- */
.chap{margin-bottom:14px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.chap.open{box-shadow:var(--shadow)}
.chap-head{display:flex;align-items:center;gap:12px;width:100%;padding:15px 18px;
  border:0;background:#fff;text-align:left}
.chap-head:hover{background:#f7f9fc}
.chap.open .chap-head{background:#f2f7ff;border-bottom:1px solid var(--line)}
.chap-no{font-weight:800;color:var(--blue);font-size:13px;letter-spacing:.06em;min-width:112px}
.chap-title{font-weight:700;font-size:17px}
.chap-meta{margin-left:auto;font-size:12.5px;color:var(--muted)}
.chap-arrow{color:#9db3cc;font-size:12px}
.chap-body{padding:16px 18px 20px;background:#fbfcfe}
.chap-body .unit:last-child{margin-bottom:0}
.rep tr.chrow td{background:#f2f7ff;text-align:left;font-weight:800;color:#1f6fd0;font-size:13px;letter-spacing:.04em}
.rep tr.lvrow td{background:#1f2a37;text-align:left;font-weight:800;color:#fff;font-size:13px;letter-spacing:.04em;padding-top:14px}

/* ---------- level tabs ---------- */
.lv-tabs{display:flex;gap:10px;margin-bottom:18px}
.lv-tab{
  flex:1;max-width:220px;text-align:left;padding:12px 16px;border-radius:12px;
  border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:15px;color:#55606d
}
.lv-tab small{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:2px}
.lv-tab.on{border-color:var(--blue);background:#eaf3ff;color:var(--blue)}
.lv-tab.on small{color:var(--blue-d)}
.lv-tab:hover{border-color:var(--blue)}
/* 비밀번호 칸 👁 눈 버튼 (10-13) */
.pw-wrap{position:relative;display:flex;align-items:center}.pw-wrap input{flex:1;padding-right:44px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:18px;cursor:pointer;padding:4px 6px;line-height:1;opacity:.7}.pw-eye:hover{opacity:1}
.avatar .av-none{width:58%;height:58%;display:block;color:#b9b3cc}
/* 로그인 : 학생 화면 이름 JESSY DESK (11-13) */
.login-wrap .desk-name{margin-top:6px;font-family:Georgia,'Times New Roman',serif;font-size:19px;font-weight:700;letter-spacing:.32em;color:var(--wine,#8c1131);padding-left:.32em}
.login-wrap .desk-name+.sub{margin-top:4px;font-size:13px;letter-spacing:.02em}