/* Layout: one full-height stage per screen. A five-line music staff is the progress track. Single bright theme for classrooms and booths. */
:root{
  --bg:#F1F5FA; --paper:#FFFFFF; --ink:#13213A; --ink-2:#4A5A75; --ink-3:#7D8BA3; --line:#D3DDEA;
  --tang:#FF6A3D; --tang-ink:#C2401A; --tang-soft:#FFE4D9;
  --sun:#FFC93C; --sun-soft:#FFF3CC; --mint:#16A88E; --mint-soft:#D5F4ED;
  --berry:#E0457A; --berry-soft:#FDE1EA; --sky:#2F7FE0; --sky-soft:#DDEBFD;
  --ok:#16A88E; --warn:#E39B00; --bad:#D63B3B;
  --display:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --body:'IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --r-l:22px; --r-m:14px; --r-s:10px;
  --shadow:0 1px 0 rgba(19,33,58,.06),0 8px 24px -12px rgba(19,33,58,.25);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-tap-highlight-color:transparent;word-break:keep-all;overflow-wrap:anywhere}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
[hidden]{display:none!important}

/* buttons */
.btn-big{font-family:var(--display);font-size:clamp(22px,3vw,30px);background:var(--tang);color:#fff;padding:.65em 1.5em;border-radius:999px;box-shadow:0 6px 0 var(--tang-ink);transition:transform .08s,box-shadow .08s;display:inline-flex;align-items:center;justify-content:center;gap:.4em}
.btn-big:active{transform:translateY(4px);box-shadow:0 2px 0 var(--tang-ink)}
.btn-big small{font-size:.6em;opacity:.85;font-family:var(--body)}
.btn-sub{font-family:var(--display);font-size:clamp(18px,2.2vw,22px);background:var(--paper);color:var(--ink);padding:.6em 1.2em;border-radius:999px;border:2px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:.35em}
.btn-sub small{font-family:var(--body);font-size:.7em;color:var(--ink-2)}
.btn-ghost{font-size:17px;color:var(--ink-2);padding:.6em .9em;border-radius:999px}
.btn-ghost:hover{background:rgba(19,33,58,.06)}
.btn-s{display:inline-flex;align-items:center;gap:.35em;font-size:14px;font-weight:500;padding:.45em .85em;border-radius:var(--r-s);border:1px solid var(--line);background:var(--paper);color:var(--ink);text-decoration:none;white-space:nowrap}
.btn-s:hover{border-color:var(--ink-3)}
.btn-s.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-s.go{background:var(--mint);border-color:var(--mint);color:#fff}
.btn-s.danger{color:var(--bad);border-color:#F0C4C4}
.btn-s.danger.armed{background:var(--bad);color:#fff;border-color:var(--bad)}
.icon-btn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--ink-2);font-size:20px}
.chip{display:inline-flex;align-items:center;gap:.4em;font-size:13px;padding:.3em .7em;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.chip.on .dot{background:var(--ok)} .chip.mid .dot{background:var(--warn)} .chip.off .dot{background:var(--bad)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7em 1.2em;border-radius:999px;font-size:15px;z-index:80;box-shadow:0 0 0 2px rgba(255,255,255,.35),var(--shadow);max-width:calc(100% - 32px);text-align:center}

/* ---------- student app ---------- */
.k{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow-x:hidden;
  background:radial-gradient(1200px 500px at 110% -10%,var(--sun-soft),transparent 60%),radial-gradient(900px 500px at -10% 110%,var(--mint-soft),transparent 60%),var(--bg)}
.k-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px;padding-inline:clamp(16px,3vw,32px);padding-right:76px} /* 오른쪽 위 72px = 선생님 버튼 자리 */
.brand{display:flex;align-items:center;gap:10px;text-align:left}
.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--ink);color:var(--sun);display:grid;place-items:center;font-size:24px;font-family:var(--display)}
.brand b{display:block;font-family:var(--display);font-size:20px;font-weight:400;line-height:1.1}
.brand small{display:block;font-size:13px;color:var(--ink-2)}
.who-chip{font-size:15px;padding:.4em .9em;border-radius:999px;background:var(--paper);box-shadow:var(--shadow);white-space:nowrap}
.who-chip b{color:var(--tang-ink)}
.k-main{flex:1;display:flex;flex-direction:column;padding-inline:clamp(16px,4vw,48px);padding-block:4px 18px}
.k-step{flex:1;display:flex;flex-direction:column;max-width:1180px;margin:0 auto;width:100%}
.k-start{flex:1;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,56px);align-items:center;max-width:1180px;margin:0 auto;width:100%}
.hero .eyebrow{font-size:16px;color:var(--tang-ink);font-weight:700;margin-bottom:10px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6.4vw,80px);line-height:1.12}
.hero h1 em{font-style:normal;color:var(--tang);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.22em;background:var(--sun);z-index:-1;border-radius:4px}
.hero .lead{font-size:clamp(17px,2vw,21px);color:var(--ink-2);margin:18px 0 30px;max-width:30ch}
.how{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.how li{display:grid;grid-template-columns:56px 1fr;column-gap:14px;align-items:center;background:var(--paper);border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--shadow)}
.how b{grid-row:1/3;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:26px;font-weight:400;color:#fff}
.how li:nth-child(1) b{background:var(--sky)} .how li:nth-child(2) b{background:var(--berry)} .how li:nth-child(3) b{background:var(--mint)}
.how span{font-family:var(--display);font-size:24px;line-height:1.1}
.how small{color:var(--ink-2);font-size:15px}
.step-head{display:grid;grid-template-columns:110px minmax(0,1fr) 110px;align-items:end;gap:8px;margin-top:clamp(8px,2.4vh,22px)}
.step-head .btn-ghost{justify-self:start;align-self:center}
.staff{max-width:680px;width:100%;margin:0 auto}
.staff-track{position:relative;height:54px}
.staff-lines{position:absolute;inset:6px 0;display:flex;flex-direction:column;justify-content:space-between}
.staff-lines i{display:block;height:1.5px;background:var(--line)}
.staff-notes{list-style:none;margin:0;padding:0;position:absolute;inset:0;display:grid}
.staff-notes li{position:relative}
.note{position:absolute;left:50%;top:var(--y);width:20px;height:15px;margin-left:-10px;border-radius:50%;border:2.5px solid var(--line);background:var(--bg);transform:rotate(-20deg)}
.note::after{content:"";position:absolute;right:-3px;bottom:7px;width:2.5px;height:30px;background:var(--line);border-radius:2px;transform:rotate(20deg);transform-origin:bottom}
.staff-notes li.done .note{background:var(--ink);border-color:var(--ink)} .staff-notes li.done .note::after{background:var(--ink)}
.staff-notes li.now .note{background:var(--tang);border-color:var(--tang);animation:pop 1.2s ease-in-out infinite} .staff-notes li.now .note::after{background:var(--tang)}
@keyframes pop{50%{transform:rotate(-20deg) scale(1.18)}}
.staff-labels{display:grid;margin-top:4px}
.staff-labels span{text-align:center;font-size:14px;color:var(--ink-3)}
.staff-labels span.now{color:var(--tang-ink);font-weight:700} .staff-labels span.done{color:var(--ink)}
.q{font-family:var(--display);font-weight:400;font-size:clamp(28px,min(4.4vw,6.4vh),48px);text-align:center;margin-top:clamp(6px,1.6vh,14px)}
.q-sub{text-align:center;color:var(--ink-2);font-size:clamp(16px,1.8vw,19px);margin:4px 0 clamp(12px,2.4vh,22px)}
.cards{display:grid;gap:clamp(10px,1.6vw,18px);grid-template-columns:repeat(4,minmax(0,1fr))}
.cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--paper);border-radius:var(--r-l);padding:clamp(10px,2.2vh,22px) 12px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:3px solid transparent;box-shadow:var(--shadow);transition:transform .12s,border-color .12s;min-width:0}
.card:active{transform:scale(.97)}
.card .ic{width:clamp(50px,min(8vw,10.5vh),86px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(28px,min(4.4vw,5.8vh),46px);margin-bottom:4px;background:var(--tint)}
.card b{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.4vw,26px);line-height:1.2}
.card small{color:var(--ink-2);font-size:clamp(13px,1.4vw,15px)}
.card.sel{border-color:var(--tang);transform:translateY(-3px)}
.t0{--tint:var(--sun-soft)} .t1{--tint:var(--mint-soft)} .t2{--tint:var(--berry-soft)} .t3{--tint:var(--sky-soft)} .t4{--tint:var(--tang-soft)}
.k-nav{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:auto;padding-top:16px;flex-wrap:wrap}
.slots{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.slot{min-width:150px;height:62px;border-radius:999px;border:2.5px dashed var(--line);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px 0 22px;font-family:var(--display);font-size:24px;color:var(--ink-3)}
.slot.filled{border:0;background:var(--ink);color:#fff;padding-right:8px}
.slot .x{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:20px;display:grid;place-items:center}
.suggest{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:0 auto 18px}
.sug{font-size:clamp(17px,2vw,20px);padding:.5em 1.05em;border-radius:999px;background:var(--paper);box-shadow:var(--shadow);border:2px solid transparent}
.sug.on{border-color:var(--tang);color:var(--tang-ink)}
.free{display:flex;gap:10px;max-width:560px;margin:0 auto;width:100%}
.free input{flex:1;min-width:0;font-size:22px;padding:.6em .9em;border-radius:var(--r-m);border:2.5px solid var(--line);background:var(--paper)}
.free input:focus{border-color:var(--ink);outline:none}
.free button{font-family:var(--display);font-size:22px;background:var(--ink);color:#fff;padding:0 1.1em;border-radius:var(--r-m)}
.warn{text-align:center;color:var(--bad);min-height:1.6em;margin-top:8px;font-size:16px}
/* identity step */
.id-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px);max-width:1000px;margin:0 auto;width:100%}
.id-box{background:var(--paper);border-radius:var(--r-l);padding:clamp(10px,1.8vh,16px) 16px;box-shadow:var(--shadow)}
.id-box h3{font-family:var(--display);font-weight:400;font-size:22px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline}
.id-box h3 span{font-family:var(--body);font-size:28px;font-weight:700;color:var(--tang-ink)}
.grade-row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.pill-btn{font-family:var(--display);font-size:clamp(17px,2vw,22px);padding:.45em 0;border-radius:var(--r-m);background:var(--bg);border:2.5px solid transparent}
.pill-btn.sel{background:var(--tang-soft);border-color:var(--tang);color:var(--tang-ink)}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.keypad button{font-family:var(--display);font-size:24px;height:clamp(44px,6.4vh,56px);border-radius:var(--r-m);background:var(--bg)}
.keypad button:active{background:var(--line)}
.id-wide{grid-column:1/-1}
.id-side{display:flex;flex-direction:column;gap:clamp(12px,2vw,24px)}
.id-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.id-summary p{color:var(--ink-2);font-size:15px}
.id-summary b{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,48px);color:var(--tang);line-height:1}
.id-summary .btn-big{flex:none}
.nick{display:flex;gap:10px;align-items:center}
.nick input{flex:1;min-width:0;font-size:20px;padding:.5em .8em;border-radius:var(--r-m);border:2px solid var(--line)}
/* making + review */
.k-making{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;max-width:860px;margin:0 auto;width:100%}
.eq{display:flex;align-items:flex-end;gap:7px;height:70px}
.eq i{width:14px;border-radius:7px;background:var(--tang);animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){background:var(--sun);animation-delay:-.2s} .eq i:nth-child(3){background:var(--mint);animation-delay:-.4s} .eq i:nth-child(4){background:var(--sky);animation-delay:-.6s} .eq i:nth-child(5){background:var(--berry);animation-delay:-.8s}
@keyframes eq{0%,100%{height:18px}50%{height:70px}}
.k-making h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,44px)}
.recipe{color:var(--ink-2);font-size:18px}
.k-review{flex:1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(16px,3vw,36px);max-width:1180px;margin:0 auto;width:100%;align-items:start}
.sheet{background:var(--paper);border-radius:var(--r-l);padding:clamp(18px,3vw,32px);box-shadow:var(--shadow);border-top:10px solid var(--sun);min-width:0}
.sheet .eyebrow{color:var(--tang-ink);font-weight:700;font-size:15px}
.song-title{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,46px);line-height:1.15;margin:6px 0 14px}
.song-title-input{font-family:var(--display);font-size:clamp(26px,3.4vw,40px);width:100%;border:0;border-bottom:2px dashed var(--line);padding:4px 0;margin:6px 0 14px;background:transparent}
.lyrics{column-count:2;column-gap:32px;font-size:clamp(16px,1.8vw,19px);line-height:1.75}
.lyrics .sec{break-inside:avoid;margin-bottom:12px}
.lyrics .tag{display:inline-block;font-size:13px;line-height:1.4;font-weight:700;color:#fff;background:var(--ink);border-radius:6px;padding:1px 8px;margin:6px 0 2px}
.lyrics .tag.chorus{background:var(--tang)}
.lyrics-edit{width:100%;min-height:380px;font-size:18px;line-height:1.7;border:2px solid var(--line);border-radius:var(--r-m);padding:12px 14px;resize:vertical}
.lyrics-edit:focus{outline:none;border-color:var(--ink)}
.edit-tip{font-size:14px;color:var(--ink-2);margin-top:8px}
.review-actions{display:flex;flex-direction:column;gap:14px;align-items:stretch;position:sticky;top:12px}
.review-actions .ask{font-family:var(--display);font-size:28px;text-align:center}
.review-note{font-size:14px;color:var(--ink-2);text-align:center}
/* status / done */
.k-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;max-width:900px;margin:0 auto;width:100%;text-align:center}
.ticket-code{font-family:var(--display);font-size:clamp(64px,11vw,120px);line-height:1;color:var(--tang)}
.progress3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:640px}
.progress3 div{background:var(--paper);border-radius:var(--r-m);padding:12px;box-shadow:var(--shadow);font-family:var(--display);font-size:20px;color:var(--ink-3)}
.progress3 div.on{background:var(--ink);color:#fff}
.progress3 div.now{background:var(--tang);color:#fff}
.status-line{font-size:clamp(18px,2.2vw,22px);color:var(--ink-2)}
.players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:760px}
.player{background:var(--paper);border-radius:var(--r-l);padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;align-items:center}
.player b{font-family:var(--display);font-weight:400;font-size:20px}
.player audio{width:100%}
.qr-box{display:flex;gap:16px;align-items:center;background:var(--paper);border-radius:var(--r-l);padding:14px 18px;box-shadow:var(--shadow);text-align:left}
.qr-box .qr{width:132px;height:132px;flex:none}
.qr-box .qr svg{width:100%;height:100%;display:block}

/* ---------- song page / class page ---------- */
.page{background:var(--bg)}
.song-page{max-width:760px;margin:0 auto;padding:28px 16px 40px;display:flex;flex-direction:column;gap:16px}
.song-page .eyebrow{color:var(--tang-ink);font-weight:700}
.song-page h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,7vw,46px);line-height:1.15}
.song-page .meta{color:var(--ink-2)}
.track{background:var(--paper);border-radius:var(--r-l);padding:14px 16px;box-shadow:var(--shadow);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.track audio{width:100%}
.track-label{font-family:var(--display);font-size:18px}
.wait-note{background:var(--sun-soft);border-radius:var(--r-m);padding:14px 16px}
.save-now{background:var(--tang-soft);border:2px solid var(--tang);border-radius:var(--r-l);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.save-now b{font-family:var(--display);font-weight:400;font-size:clamp(20px,5vw,26px);color:var(--tang-ink)}
.save-now em{font-style:normal;font-weight:700}
.save-now small{color:var(--ink-2);font-size:13px;margin-top:2px}
.track .btn-s{justify-content:center;font-size:16px;font-weight:700;padding:.6em 1em}
.song-page .sheet .lyrics{column-count:1}
.foot{font-size:13px;color:var(--ink-3);text-align:center}
.class-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.class-row{background:var(--paper);border-radius:var(--r-m);padding:12px 14px;box-shadow:var(--shadow);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.class-row .grow{display:flex;flex-direction:column;gap:6px;min-width:0}
.class-row audio{width:100%}
.code{font-family:var(--display);font-size:20px;min-width:52px;text-align:center;background:var(--ink);color:#fff;border-radius:10px;padding:2px 10px;white-space:nowrap}

/* ---------- board ---------- */
.bd{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--ink);color:#fff;padding-inline:clamp(16px,3vw,40px);padding-block:clamp(16px,2.4vw,30px)}
.bd-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(14px,2vw,24px)}
.bd-top .eyebrow{color:var(--sun);font-weight:700}
.bd-top h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,64px);line-height:1.1}
.bd-hint{font-size:clamp(16px,1.6vw,22px);color:#C9D3E3}
.bd-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:clamp(14px,2vw,28px)}
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(10px,1.4vw,18px);align-content:start}
.bd-card{background:var(--paper);color:var(--ink);border-radius:var(--r-l);padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative;min-width:0}
.bd-card .code{font-size:clamp(22px,2.4vw,30px)}
.bd-card .qr{width:100%;max-width:170px;aspect-ratio:1}
.bd-card .qr svg{width:100%;height:100%;display:block}
.bd-card b{font-family:var(--display);font-weight:400;font-size:20px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-card.new{outline:5px solid var(--sun)}
.bd-card.new::before{content:"NEW";position:absolute;top:-10px;right:-6px;background:var(--tang);color:#fff;font-weight:700;font-size:13px;padding:2px 9px;border-radius:999px}
.bd-empty{border:2px dashed rgba(255,255,255,.25);border-radius:var(--r-l);display:grid;place-items:center;text-align:center;padding:40px 20px;color:#C9D3E3;font-size:clamp(18px,2vw,24px);min-height:260px}
.bd-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.bd-box{background:rgba(255,255,255,.07);border-radius:var(--r-l);padding:16px 18px}
.bd-box h2{font-family:var(--display);font-weight:400;font-size:24px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.bd-box h2 .ct{font-family:var(--body);font-size:14px;background:rgba(255,255,255,.14);padding:1px 9px;border-radius:999px}
.codes{display:flex;flex-wrap:wrap;gap:8px}
.codes span{font-family:var(--display);font-size:22px;background:rgba(255,255,255,.12);border-radius:10px;padding:2px 12px}
.codes.making span{background:var(--sky)}
.codes em{font-style:normal;color:#9FB0C8;font-size:15px}

/* ---------- admin ---------- */
.mgr{min-height:100vh;background:var(--bg)}
.mgr-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px clamp(16px,2vw,24px);background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.mgr-top b{font-family:var(--display);font-weight:400;font-size:22px}
.mgr-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.mgr-tab{font-size:14px;padding:.45em .85em;border-radius:var(--r-s);color:var(--ink-2)}
.mgr-tab.on{background:var(--ink);color:#fff}
.mgr-main{max-width:1180px;margin:0 auto;padding:18px clamp(16px,2vw,24px) 40px;display:flex;flex-direction:column;gap:16px}
.mgr-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.mgr-box h2{font-size:17px;margin-bottom:10px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat{background:var(--bg);border-radius:var(--r-m);padding:10px 12px}
.stat small{display:block;color:var(--ink-2);font-size:13px}
.stat b{font-size:26px;font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
th{font-size:13px;color:var(--ink-2);font-weight:500;white-space:nowrap}
td.num{font-variant-numeric:tabular-nums}
.pill{font-size:12px;font-weight:700;padding:.25em .65em;border-radius:999px;white-space:nowrap}
.pill.waiting{background:var(--sun-soft);color:#8A5A00} .pill.making{background:var(--sky-soft);color:#1857A8} .pill.done{background:var(--mint-soft);color:#0B6E5C} .pill.failed{background:#FBE0E0;color:#A12B2B} .pill.held{background:#FBE0E0;color:#A12B2B}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:14px;font-weight:700}
.field label span{font-weight:400;color:var(--ink-3);margin-left:6px}
.field input,.field select{border:1px solid var(--line);border-radius:var(--r-s);padding:.55em .7em;background:var(--paper);font-size:15px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.hint{font-size:13px;color:var(--ink-3)}
.warn-box{background:#FBE0E0;color:#7A1F1F;border-radius:var(--r-m);padding:10px 14px}
.login{max-width:360px;margin:12vh auto;background:var(--paper);border-radius:var(--r-l);padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;text-align:center}
.login input{font-size:24px;text-align:center;padding:.4em;border:2px solid var(--line);border-radius:var(--r-m)}

@media (max-width:900px){
  .k-start,.k-review{grid-template-columns:1fr}
  .review-actions{position:static}
  .cards,.cards.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .id-grid{grid-template-columns:1fr}
  .grade-row{grid-template-columns:repeat(5,minmax(0,1fr))}
  .bd-body{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .lyrics{column-count:1}
  .players{grid-template-columns:1fr}
  .grade-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .id-summary{flex-direction:column;align-items:stretch;text-align:center}
  .step-head{grid-template-columns:76px minmax(0,1fr) 0}
  .track{grid-template-columns:1fr}
  .class-row{grid-template-columns:auto minmax(0,1fr)}
  .class-row .btn-s{grid-column:1/-1;justify-content:center}
  .qr-box{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* admin: program toggles */
.prog-toggles{display:flex;flex-wrap:wrap;gap:8px 18px}
.tog{display:inline-flex;align-items:center;gap:8px;font-size:15px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper)}
.tog input{width:18px;height:18px;accent-color:var(--ink)}

/* class page: caricature gallery */
.sec-h{font-family:var(--display);font-weight:400;font-size:24px;margin:22px 0 10px}
.sec-h small{font-family:var(--body);font-size:15px;color:var(--ink-3)}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.kpic{margin:0;background:var(--paper);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow)}
.kpic img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--bg)}
.kpic figcaption{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;font-size:14px}
.kpic figcaption .btn-s{margin-left:auto;font-size:13px;padding:.35em .7em}
.kpic figcaption .btn-s + .btn-s{margin-left:0}
.kpic figcaption small{width:100%}
.mgr .kgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.trep{border-top:1px solid var(--line);padding:10px 0}
.trep summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* 관리자: 그림 AI 경로 표 (2026-10-05) */
.ktable .drag{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;font-size:20px;padding:2px 8px;border-radius:8px;color:var(--ink-2)}
.ktable .drag:hover{background:var(--line)}
.ktable tr.dragging{background:#eef4ff;box-shadow:0 6px 18px rgba(19,33,58,.18)}
.ktable tr.dragging .drag{cursor:grabbing}
.ktable tr.off td{opacity:.6}
.ksel{font:inherit;font-size:14px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;max-width:100%;margin-top:4px}
.kfold{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.kfold>summary{cursor:pointer;list-style:revert}
.kfold .kfold{margin-top:10px;background:rgba(0,0,0,.015)}

/* 관리자: 셀피 용지·잉크 게이지 (2026-10-05) */
.sup-list{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:10px}
.sup-item{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper)}
.sup{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.sup-l{min-width:30px;font-weight:700;color:var(--ink-2)}
.sbar{display:inline-block;width:160px;height:12px;border-radius:7px;background:var(--line);overflow:hidden}
.sbar i{display:block;height:100%;border-radius:7px}
.sup .ksel{margin-top:0}