/* 2026-11-03 UI UX Pro Max 추천(교육 앱: 부드러운 클레이 느낌, 인디고 + 주황)으로 다듬음 — 원래 색은 파랑 #1c5fd4 */
:root{--bg:#EEF2FF;--card:#fff;--line:#DDE3F6;--text:#1E1B4B;--sub:#585E7A;--accent:#4F46E5;--accent-2:#E0E7FF;--on-accent:#fff;
--warn:#C2410C;--warn-2:#FFF1E6;--ok:#2B8A3E;--ok-2:#E7F7EC;--bad:#C92A2A;--bad-2:#FDECEC;
--shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(30,27,75,.04),0 10px 24px -10px rgba(79,70,229,.22);--press:#3730A3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12122A;--card:#1C1C3A;--line:#2F3058;--text:#ECEDFB;
--sub:#A6A9CC;--accent:#A5B4FC;--accent-2:#272A5C;--on-accent:#14123A;--warn:#FFA36B;--warn-2:#3A2618;--ok:#7BD88F;--ok-2:#17301D;--bad:#FF8787;--bad-2:#3A1C1C;
--shadow:0 10px 24px -12px rgba(0,0,0,.6);--press:#6366F1}}
:root[data-theme="dark"]{--bg:#12122A;--card:#1C1C3A;--line:#2F3058;--text:#ECEDFB;--sub:#A6A9CC;--accent:#A5B4FC;--on-accent:#14123A;
--accent-2:#272A5C;--warn:#FFA36B;--warn-2:#3A2618;--ok:#7BD88F;--ok-2:#17301D;--bad:#FF8787;--bad-2:#3A1C1C;--shadow:0 10px 24px -12px rgba(0,0,0,.6);--press:#6366F1}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 "Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
main{max-width:640px;margin:0 auto;padding:16px 16px calc(96px + env(safe-area-inset-bottom))}
main.wide{max-width:1100px}
[hidden]{display:none!important}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:6px 2px 14px}
.top h1{margin:0;font-size:clamp(17px,4.9vw,21px);letter-spacing:-.3px;word-break:keep-all}
.top p{margin:2px 0 0;color:var(--sub);font-size:14px}
.top #menu{display:flex;gap:6px;flex-shrink:0;white-space:nowrap}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.card h2{font-size:18px;font-weight:800;letter-spacing:-.3px}
.stack{display:grid;gap:10px}
.sec{font-size:15px;color:var(--sub);margin:22px 2px 8px}
button{font:inherit;cursor:pointer;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--text);padding:8px 14px;
  min-height:40px;transition:transform .15s ease-out,box-shadow .15s ease-out,background-color .2s,border-color .2s}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
/* 누르는 버튼은 아래 두께(클레이 느낌), 누르면 내려감 */
.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700;box-shadow:0 3px 0 var(--press)}
.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--press)}
.ghost{background:transparent;border-color:transparent;color:var(--sub);padding:6px 8px;font-size:14px}
.danger{color:var(--bad)}
.small{font-size:13px;padding:4px 10px;border-radius:9px}
input,select,textarea{font:inherit;width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.form{display:grid;gap:12px}
.form label{display:grid;gap:4px;font-size:14px;font-weight:600}
.form label small{font-weight:400;color:var(--sub)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fine{margin:0;font-size:13px;color:var(--sub)}
.msg{margin:0;font-size:14px;color:var(--sub);min-height:1em}
.msg.err{color:var(--warn)}
.msg.good{color:var(--ok)}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button{flex:1;padding:10px;font-weight:650;color:var(--sub)}
.tabs button.on{background:var(--accent-2);border-color:var(--accent);color:var(--accent)}
.codebox h2{margin:0 0 8px;font-size:16px}
.codebox form{display:flex;gap:8px;margin-bottom:6px}
#codeIn{flex:1;min-width:0;font:600 24px/1.2 ui-monospace,"SF Mono",Consolas,monospace;letter-spacing:.3em;text-align:center;padding:10px 6px}
.hwcard{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;width:100%;padding:14px 16px;border-radius:14px;background:var(--card);box-shadow:var(--shadow)}
.hwcard b{display:block;font-size:16px}
.hwcard span{font-size:13px;color:var(--sub)}
.badge{flex:none;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--accent-2);color:var(--accent);white-space:nowrap}
.badge.done{background:var(--ok-2);color:var(--ok)}
.badge.late,.badge.miss{background:var(--bad-2);color:var(--bad)}
.badge.gray{background:var(--bg);color:var(--sub)}
.back{margin:0 0 10px;padding:10px 16px;font-size:16px;font-weight:700;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:12px}
.title{margin:0;font-size:20px;line-height:1.35}
.meta{margin-top:4px;font-size:14px;color:var(--sub)}
.note{margin:10px 0 0;padding:10px 12px;background:var(--bg);border-radius:10px;font-size:14px;white-space:pre-wrap}
.pdfbtn{display:block;margin-top:12px;padding:12px;border-radius:12px;background:var(--accent-2);color:var(--accent);font-weight:700;text-align:center;text-decoration:none}
.score{margin-top:12px;display:flex;gap:10px}
.score div{flex:1;text-align:center;padding:12px 6px}
.score b{display:block;font-size:24px;font-variant-numeric:tabular-nums}
.score span{font-size:13px;color:var(--sub)}
.items{margin-top:12px;display:grid;gap:8px}
.item{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.item .no{font-weight:800;font-size:17px;text-align:center;font-variant-numeric:tabular-nums}
.item.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:var(--ok-2)}
.item.bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:var(--bad-2)}
.item .mark{font-weight:800;font-size:15px}
.item.ok .mark{color:var(--ok)}
.item.bad .mark{color:var(--bad)}
.item .given{font-size:15px}
.item .given s{color:var(--sub)}
.item a{font-size:13px;color:var(--accent);text-decoration:none;white-space:nowrap}
.choices{display:flex;gap:6px}
.choices button{flex:1;min-width:0;padding:8px 0;font-size:18px;line-height:1.2}
.choices button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.bar{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.bar button{display:block;width:100%;max-width:608px;margin:0 auto;padding:14px;font-size:17px}
.empty{text-align:center;color:var(--sub);padding:24px 8px}
/* 매일미션 */
.mission h2{margin:0 0 4px;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.mission .q{margin:6px 0 10px;font-size:17px;font-weight:650;line-height:1.5;white-space:pre-wrap}
.mission textarea{min-height:76px;resize:vertical}
.mission .row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:8px}
.mission .done{padding:10px 12px;border-radius:10px;background:var(--ok-2);color:var(--text);white-space:pre-wrap}
.mission .done b{color:var(--ok)}
.streak{font-size:13px;font-weight:700;color:var(--warn);white-space:nowrap}
/* 달리기 */
.race-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:6px}
.race-head b{font-size:16px}
.goal{display:grid;justify-items:center;flex:none}
.goal span{font-size:12px;font-weight:700;color:var(--warn);text-align:center;line-height:1.25;white-space:nowrap}
.chicken{width:58px;height:52px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px) rotate(-3deg)}}
.race-win{margin:6px 0;padding:6px 10px;border-radius:10px;background:var(--warn-2);font-weight:700;font-size:14px}
.lanes{display:grid}
.lane{display:grid;grid-template-columns:96px 1fr;align-items:end;height:40px}
.lane .who{display:flex;gap:4px;align-items:center;font-size:13px;padding-bottom:6px;min-width:0}
.lane .rk{flex:none;min-width:24px;font-weight:700;color:var(--sub);font-size:12px}
.lane .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lane.me .nm{font-weight:800;color:var(--accent)}
/* 길을 결승선 일수(--n)만큼 칸으로: 칸 사이 세로 점선, 간 칸까지(--p) 그 학생 색으로 옅게, 칸 번호는 아래에 작게 */
.track{position:relative;height:100%;border-bottom:2px dashed var(--line);
  background-image:linear-gradient(to right,color-mix(in srgb,var(--c) 14%,transparent) calc(var(--p) * 100%),transparent 0),
    repeating-linear-gradient(to right,transparent 0 calc(100% / var(--n) - 1px),var(--line) calc(100% / var(--n) - 1px) calc(100% / var(--n)));
  background-size:calc(100% - 7px) 100%;background-repeat:no-repeat}
.track .cell{position:absolute;bottom:1px;transform:translateX(-50%);font-style:normal;font-size:10px;color:var(--sub);opacity:.55;pointer-events:none}
.track .cell.last{top:3px;bottom:auto;opacity:1;color:var(--warn);font-weight:800;font-size:9.5px;line-height:1.15;text-align:center;white-space:nowrap}
.track::after{content:"";position:absolute;right:0;top:0;bottom:0;width:7px;
  background:repeating-linear-gradient(0deg,var(--text) 0 5px,var(--card) 5px 10px)}
.lane.me .track{background-color:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:8px 8px 0 0}
.rn{position:absolute;bottom:0;left:calc(var(--from,0) * (100% - 7px) - var(--off,0px));width:30px;display:grid;justify-items:center;transition:left 1.9s cubic-bezier(.25,.8,.3,1)}
.rn.go{left:calc(var(--to) * (100% - 7px) - var(--off))}
.rn .fig{width:26px;height:32px;overflow:visible}
.rn .pt{position:absolute;left:30px;bottom:6px;font-size:12px;font-weight:700;color:var(--c);font-variant-numeric:tabular-nums}
.rn .leg,.rn .arm{transform-box:fill-box;transform-origin:top center}
.rn.run .l1,.rn.run .a2{animation:swing .32s ease-in-out infinite alternate}
.rn.run .l2,.rn.run .a1{animation:swing .32s ease-in-out infinite alternate-reverse}
.rn.run .fig{animation:hop .32s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}
@keyframes hop{to{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.rn{transition:none}.chicken,.rn .fig,.rn .leg,.rn .arm{animation:none!important}}
/* 관리자 */
/* 선생님 메뉴: 묶음으로. 폰은 가로로 넘기는 한 줄, 넓은 화면은 왼쪽 세로 메뉴(11-05) */
.nav{position:relative;display:flex;align-items:center;gap:2px;overflow-x:auto;margin:0 -16px 14px;padding:0 16px 6px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.navg{display:contents}
.navg b{flex:none;margin-right:2px;font-size:12px;font-weight:700;color:var(--sub)}
.navg+.navg b{margin-left:14px}
.nav button{flex:none;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:none;box-shadow:none;color:var(--text);font-weight:600;white-space:nowrap}
.nav button:hover:not(.on){background:var(--accent-2)}
.nav button.on{background:var(--accent);color:var(--on-accent)}
@media (min-width:900px){
  main.wide{max-width:1240px}
  #app:not([hidden]){display:grid;grid-template-columns:172px minmax(0,1fr);gap:24px;align-items:start}
  .nav{position:sticky;top:16px;display:block;overflow:visible;margin:0;padding:12px;background:var(--card);border:1.5px solid var(--line);border-radius:22px}
  .navg{display:block}
  .navg+.navg{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
  .navg b,.navg+.navg b{display:block;margin:0 0 4px 12px}
  .nav button{display:flex;align-items:center;width:100%;text-align:left}
}
.nav .dot{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--bad);color:#fff;font-size:12px;line-height:20px;text-align:center}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tools select,.tools input{width:auto}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{position:sticky;top:0;background:var(--card);font-weight:650;color:var(--sub);font-size:13px}
td.c,th.c{text-align:center}
tr:last-child td{border-bottom:0}
.cell{display:inline-block;min-width:54px;padding:2px 8px;border-radius:8px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.cell.hi{background:var(--ok-2);color:var(--ok)}
.cell.mid{background:var(--warn-2);color:var(--warn)}
.cell.lo,.cell.miss{background:var(--bad-2);color:var(--bad)}
.cell.wait{color:var(--sub)}
[data-mon]{min-width:44px;min-height:44px}
.dates{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.dates button{min-height:44px;padding:0 12px;white-space:nowrap}
.dates button.on,.wdays button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.wdays{display:inline-flex;gap:3px}
.wdays button{min-width:36px;min-height:36px;padding:0}
.att{display:inline-flex;gap:6px}
.att button{min-height:44px;padding:0 14px;white-space:nowrap}
.att button.present.on{background:var(--ok-2);border-color:var(--ok);color:var(--ok)}
.att button.late.on{background:var(--warn-2);border-color:var(--warn);color:var(--warn)}
.att button.absent.on{background:var(--bad-2);border-color:var(--bad);color:var(--bad)}
.cell small{font-weight:500;opacity:.8}
.ans{cursor:pointer;border-radius:6px;padding:1px 6px}
.ans.ok{background:var(--ok-2);color:var(--ok)}
.ans.bad{background:var(--bad-2);color:var(--bad)}
.ans.wait{background:var(--bg);color:var(--sub)}
.ans.k{outline:2px dashed var(--accent);outline-offset:-2px}
.grid2{display:grid;gap:12px}
@media (min-width:800px){.grid2{grid-template-columns:1fr 1fr}}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13px;margin:2px}
.mono{font-family:ui-monospace,"SF Mono",Consolas,monospace;letter-spacing:.08em}
dialog{border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--text);padding:18px;max-width:min(560px,calc(100vw - 32px));width:100%}
dialog::backdrop{background:rgba(0,0,0,.35)}
.drop{border:2px dashed var(--line);border-radius:12px;padding:12px}
.drop.over{border-color:var(--accent);background:var(--accent-2)}
.hwtools{display:grid;gap:8px;margin-top:12px}
.hwtools .pdfbtn{margin-top:0;width:100%;border:0;font:inherit;font-weight:700;cursor:pointer}
#hwPanel{margin-top:12px}
.ptitle{margin:0 0 10px;font-size:16px}
.nums{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.nums button{min-width:40px;padding:6px 8px;font-variant-numeric:tabular-nums}
.nums button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.crops{display:grid;gap:6px}
.crop{display:block;width:100%;height:auto;background:#fff;border-radius:8px}
.sub{margin:14px 0 6px;font-size:14px;color:var(--sub)}
.sub:first-child{margin-top:0}
.vbox{margin-top:14px}
.vbox video{display:block;width:100%;border-radius:12px;background:#000}
.voice{display:block;width:100%;padding:16px 12px;border:0;border-radius:14px;background:#E03131;color:#fff;font:inherit;cursor:pointer;
  box-shadow:0 4px 12px rgba(224,49,49,.35);text-align:center}
.voice b{display:block;font-size:20px;font-weight:800;letter-spacing:-.3px}
.voice small{display:block;margin-top:4px;font-size:13px;font-weight:400;opacity:.9}
.voice:hover{background:#C92A2A}
.voice:disabled{opacity:.6;cursor:default}
.vmsg{font-size:13px;color:var(--sub);margin-top:8px;line-height:1.5}
.vmsg:empty{display:none}
.speed{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.speed span{font-size:13px;color:var(--sub);margin-right:2px}
.speed button{min-width:52px;padding:6px 10px;border-radius:999px;font-size:14px}
.speed button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
dialog.ask{border:0;border-radius:16px;padding:20px;max-width:min(360px,calc(100vw - 32px));background:var(--card);color:var(--text);box-shadow:0 10px 40px rgba(0,0,0,.25)}
dialog.ask::backdrop{background:rgba(0,0,0,.35)}
dialog.ask p{margin:0 0 16px;line-height:1.55;font-size:15px}
dialog.ask .tools{display:flex;gap:8px;justify-content:flex-end}
.qabox{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.qalog{display:grid;gap:8px;max-height:360px;overflow-y:auto;margin-bottom:8px}
.qa-q{justify-self:end;max-width:85%;background:var(--accent);color:var(--on-accent);padding:8px 12px;border-radius:14px 14px 4px 14px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.qa-row{display:flex;gap:8px;align-items:flex-start;justify-self:start;max-width:96%}
.qa-face{width:26px;height:26px;margin-top:2px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.qa-who{color:var(--accent);margin-right:2px}
.qa-a{min-width:0;background:var(--bg);border:1px solid var(--line);padding:10px 12px;border-radius:14px 14px 14px 4px;font-size:14px;line-height:1.65;word-break:break-word}
.qa-a.wait{color:var(--sub)}
.qa-a.err{color:var(--bad)}
.qaform{display:flex;gap:8px;align-items:flex-end}
.qaform textarea{flex:1;resize:vertical;min-height:44px;font-size:15px}
.qaform button{flex-shrink:0;padding:10px 14px}
/* 수인T 질문봇(학생 화면 맨 아래, 2026-11-03): 사진으로 묻기 */
.qa-camrow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.qa-camrow .qa-cam{padding:8px 12px;font-weight:700}
.qa-camrow .fine{margin:0}
.qa-img{display:block;max-width:100%;max-height:260px;margin-bottom:6px;border-radius:10px;object-fit:contain;background:#fff}
.qa-pick{position:relative;display:inline-block;margin-top:8px}
.qa-pick img{display:block;max-width:160px;max-height:160px;border-radius:10px;border:1px solid var(--line)}
.qa-pick button{position:absolute;top:-8px;right:-8px;width:26px;height:26px;padding:0;border-radius:50%;line-height:24px;text-align:center}
.botbox .qalog{max-height:480px}
/* 제목 옆 열심히 달리는 수인T(선생님 사진 → 나노 바나나 프로 캐릭터, 배경 지움, 2026-10-26) */
.brand{display:flex;align-items:center;gap:4px;min-width:0}
.suin-run{position:relative;width:58px;height:84px;flex-shrink:0}
/* 달리기 동작 4장(suin_runcycle.png, 한 칸 117×200)을 차례로 바꿔 팔다리가 움직이게(2026-10-26 선생님 지정) */
.suin-run .fig{position:absolute;left:8px;bottom:4px;width:46.8px;height:80px;background:url(suin_runcycle.png) 0 0/187.2px 80px no-repeat;
  transform-origin:50% 100%;animation:runcycle .5s steps(4) infinite,stride .25s ease-in-out infinite alternate}
@keyframes runcycle{to{background-position:-187.2px 0}}
@keyframes stride{from{transform:translateY(0) rotate(3deg)}to{transform:translateY(-4px) rotate(6deg)}}
.suin-run .sl{position:absolute;left:0;height:3px;border-radius:2px;background:var(--accent);opacity:.5;animation:whoosh .5s linear infinite}
.suin-run .sl:nth-child(1){top:30px;width:14px}
.suin-run .sl:nth-child(2){top:44px;width:18px;animation-delay:.17s}
.suin-run .sl:nth-child(3){top:58px;width:12px;animation-delay:.33s}
.suin-run .dust{position:absolute;left:6px;bottom:2px;width:10px;height:6px;border-radius:50%;background:var(--sub);opacity:0;animation:dust .25s ease-out infinite}
@keyframes hop{from{transform:translateY(0) rotate(4deg) scaleY(.97)}to{transform:translateY(-6px) rotate(9deg) scaleY(1.02)}}
@keyframes whoosh{from{transform:translateX(8px);opacity:0}30%{opacity:.6}to{transform:translateX(-10px);opacity:0}}
@keyframes dust{0%{transform:translate(8px,0) scale(.4);opacity:.35}100%{transform:translate(-6px,-4px) scale(1.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.suin-run *{animation:none!important}}
.qa-a .katex{font-size:1.12em}
.faq details{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-top:6px;background:var(--card)}
.faq summary{cursor:pointer;font-size:14px;font-weight:600;list-style:none}
.faq summary::before{content:"Q. ";color:var(--accent);font-weight:800}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{margin-bottom:8px}
.qa-q{animation:pop .18s ease-out}
.typing i{font-style:normal;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.2}30%{opacity:1}}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
/* 학부모(보기만): 답 고르기·입력 막기 */
body.parent #items .choices button, body.parent #items input { pointer-events: none; opacity: .6; }
/* 수업 영상 */
.pill.ok{background:var(--ok-2);color:var(--ok);border-color:transparent}
.pill.bad{background:var(--bad-2);color:var(--bad);border-color:transparent}
a.btnlink{display:inline-block;text-decoration:none;border:1px solid var(--line);background:var(--card);color:var(--text)}
.lesson{border-top:1px solid var(--line);padding:12px 0}
.lesson:first-of-type{border-top:0}
.lesson .lt{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.lesson .lt b{font-size:16px}
.lesson .lbtn{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lesson .lbtn a,.lesson .lbtn button{font-size:14px;padding:7px 12px;border-radius:10px;text-decoration:none}
.lesson video{width:100%;border-radius:12px;background:#000;margin-top:10px;display:block}
.chap{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:260px;overflow:auto}
.chap button{display:flex;gap:10px;align-items:center;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:14px;color:var(--text)}
.chap button i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--sub);min-width:42px}
.chap button span.k{font-size:12px;border-radius:99px;padding:1px 8px;color:#fff}
.lpart+.lpart{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.lpart .pno{font-weight:700;font-size:15px;margin-top:8px}
.chicken .steam{animation:steam 1.8s ease-in-out infinite}
@keyframes steam{0%,100%{opacity:.35;transform:translateY(1px)}50%{opacity:.9;transform:translateY(-2px)}}
/* 기프티콘 선물함 */
.giftgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:10px}
.giftgrid figure{margin:0;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--bg)}
.giftgrid img{width:100%;height:120px;object-fit:contain;border-radius:6px;background:#fff}
.giftgrid figcaption{font-size:12px;color:var(--sub);display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:4px;overflow:hidden}
.gift{border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:8px}
.gift .gt{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gift img{width:100%;border-radius:10px;margin-top:8px;background:#fff}
.gift.used{opacity:.55}
/* 미션 사진 인증 */
.photoBtn{display:block;margin-top:10px;padding:14px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:16px;text-align:center;cursor:pointer}
.mphoto{display:block;width:100%;max-height:360px;object-fit:contain;border-radius:10px;margin-top:8px;background:#fff}

.mnote{font-size:12px;font-weight:600;color:var(--sub)}
.mstate{margin-top:6px;font-size:12px;color:var(--sub)}
.mstate.ok{color:var(--ok);font-weight:700}
.prevrace summary{cursor:pointer;font-weight:700;font-size:15px;color:var(--sub)}
.prevrace[open] summary{margin-bottom:8px}
/* 달리기: 선생님이 아직 승인 안 한 칸이 있으면 캐릭터 옆에 */
.rn .wait{position:absolute;left:22px;top:-9px;font-size:10px;font-weight:700;color:var(--warn);white-space:nowrap;background:var(--card);border-radius:6px;padding:0 3px}
/* 오늘의 기습미션 */
.surprise{border:2px solid #FF6B4A;box-shadow:0 0 0 4px rgba(255,107,74,.15);animation:surprisePulse 1.6s ease-in-out infinite}
.surprise h2{color:#E8590C}
@keyframes surprisePulse{50%{box-shadow:0 0 0 8px rgba(255,107,74,.05)}}
@media (prefers-reduced-motion:reduce){.surprise{animation:none}}
/* 매일 미션 8문제(2026-10-28) */
.quizcard{border:2px solid var(--accent)}
.quizcard .qhw+.qhw{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.quizcard .qgo.primary,.quizcard .qgo.ghost{width:100%;margin-top:8px;padding:13px;font-size:16px}
.quizcard .done{margin-bottom:2px}
.qdays{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.qdays button{padding:5px 10px;font-size:13px}
.qdays .ok{background:var(--ok-2);color:var(--ok);border-color:transparent}
.qdays .bad{background:var(--bad-2);color:var(--bad);border-color:transparent}
.qdays .miss{opacity:.55}
.qitem{padding:12px 14px}
.qitem .qhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.qitem .qhead .no{font-size:17px}
.qitem .qhead .given{flex:1;font-size:15px}
.qitem .qhead .mark{font-weight:800}
.qitem.right{background:var(--ok-2)}
.qitem.right .mark{color:var(--ok)}
.qitem.open{background:var(--bad-2)}
.qitem.open .mark,.qitem.fixed .mark{color:var(--bad)}
.qitem .qans{margin-top:10px}
.qitem .lbtn{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qitem .qsol:not(:empty){margin-top:10px}
#qNote .score{margin:0 0 10px}
body.parent #qItems .qans{display:none}
/* 문제·해설 보기는 왼쪽에 잘 보이게, 오답했어요는 오른쪽에 작게(선생님 지정 10-28) */
.qitem .lbtn .solbtn{background:var(--card);border:2px solid var(--accent);color:var(--accent);font-weight:800;font-size:15px;padding:9px 16px}
.qitem .lbtn .qfix{margin-left:auto}
.qitem .lbtn button.qfix{font-size:13px;padding:6px 12px;border-radius:10px}
.hwbox h2{margin-bottom:10px}

/* 인증 완료 뒤 '채점 결과 · 해설 다시 보기' — 테두리 버튼으로 잘 보이게(선생님 지정 10-28) */
.quizcard .qgo.rebtn{width:100%;margin-top:8px;padding:12px;font-size:16px;font-weight:800;background:var(--card);border:2px solid var(--accent);color:var(--accent)}
.badge.todo{display:flex;flex-direction:column;align-items:center;gap:1px;border-radius:12px;padding:6px 10px;line-height:1.25}
.badge.todo small{font-size:11px;font-weight:600}
/* 무음 카메라·매8기 오답 사진(2026-10-28) */
.cam{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column}
.cam video{flex:1;min-height:0;width:100%;object-fit:contain;background:#000}
.cam.flash video{opacity:.3}
.camtop{color:#fff;padding:14px 16px;font-weight:700;text-align:center;font-size:15px}
.cammsg{flex:1;color:#fff;text-align:center;padding:40px 24px;margin:0;line-height:1.6}
.cambar{display:flex;align-items:center;justify-content:space-around;padding:16px 16px calc(18px + env(safe-area-inset-bottom))}
.cambar label,.cambar button{background:none;border:0;color:#fff;font-size:16px;font-weight:700;padding:10px;min-width:72px;text-align:center;cursor:pointer}
.cambar .shutter{width:74px;height:74px;min-width:74px;border-radius:50%;background:#fff;border:6px solid #9aa0a6;padding:0}
.qitem .lbtn span.qfix{display:flex;gap:8px;flex-basis:100%;margin-left:0}
.qitem .lbtn .qfix button{flex:1;font-size:14px;font-weight:700;padding:10px 8px;border-radius:10px}
.qitem .lbtn .qfix .qshot{flex:2}
.qitem .lbtn .qshot{background:var(--card);border:1.5px solid var(--bad);color:var(--bad);font-weight:700}
.qitem .qphoto{display:block;max-width:100%;max-height:200px;border-radius:8px;margin-top:8px;background:#fff}
.qitem [data-m]:empty{display:none}
.qitem [data-m]{margin:6px 0 0;font-size:13px}
/* 2026-11-03 다듬기(UI UX Pro Max): 카드 안 목록·입력·제목 */
.hwcard{border:1.5px solid var(--line);border-radius:18px;min-height:64px}
.hwcard:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.hwcard b{font-weight:750;letter-spacing:-.2px}
input,select,textarea{border-radius:14px;background:var(--card)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.tabs button{border-radius:14px}
.mission h2{flex-wrap:wrap;justify-content:flex-start;margin-bottom:8px}
.mission h2 .mnote{flex-basis:100%;font-weight:600}
.mission h2 .streak{margin-left:auto}
.quizcard{border-color:var(--accent);box-shadow:var(--shadow),0 0 0 4px var(--accent-2)}
.qdays button{border-radius:999px;min-height:34px}
.badge{border-radius:12px}
.pdfbtn{border-radius:16px;min-height:48px}
.codebox h2,.botbox h2{display:flex;align-items:center;gap:6px}
.back{border-radius:14px;min-height:44px}
.qa-q{border-radius:18px 18px 6px 18px}
.qa-a{border-radius:18px 18px 18px 6px;background:var(--accent-2);border-color:transparent}
@media (prefers-reduced-motion:reduce){button{transition:none}}