/* 혼자 하기 프로토타입 · 2026-11-10 · 파일 하나, 서버 없음. 기준: typing\게임디자인.md */
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#F1F1EE;--ink:#15151E;--muted:#5D5D66;--faint:#A9A9B0;--line:#D4D4CF;--err:#E10600}
body{font-family:'IBM Plex Sans KR','Malgun Gothic',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh}
.num{font-family:'Archivo Narrow',sans-serif;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
kbd{font-family:'Archivo Narrow',sans-serif;font-size:12px;border:1px solid currentColor;border-radius:3px;padding:0 5px;margin-left:8px;opacity:.7}
[hidden]{display:none!important}

/* 캐릭터 */
.ch .legs .l1,.ch .legs .l2{transform-box:fill-box;transform-origin:50% 0}
.ch.run .body{animation:bob calc(var(--sp,.32s) / 2) ease-in-out infinite}
.ch.run .l1{animation:swing var(--sp,.32s) ease-in-out infinite}
.ch.run .l2{animation:swing var(--sp,.32s) ease-in-out infinite;animation-delay:calc(var(--sp,.32s) / -2)}
.ch.stuck .body{animation:shake .12s linear infinite}
.ch.stuck .l1{transform:rotate(14deg)}.ch.stuck .l2{transform:rotate(-14deg)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes swing{0%,100%{transform:rotate(32deg)}50%{transform:rotate(-32deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.6px)}75%{transform:translateX(1.6px)}}

/* 머리 */
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;gap:16px}
.brand{font-weight:700;font-size:17px;white-space:nowrap}.brand small{font-weight:400;color:var(--muted);margin-left:10px;font-size:14px}
.meta{font-size:14px;color:var(--muted);text-align:right}

/* 설정 화면 */
.setup{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:48px;padding:12px 32px 40px;max-width:1240px}
.setup h2{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.02em;margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.setup h2:first-child{margin-top:0}
.preview{height:200px;display:flex;align-items:flex-end;justify-content:center;background:#3B3D45;border-radius:6px;position:relative;overflow:hidden;padding-bottom:18px}
.preview::before,.preview::after{content:"";position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(90deg,#E10600 0 22px,#fff 22px 44px)}
.preview::before{top:0}.preview::after{bottom:0}
.preview .tag{position:absolute;top:22px;left:50%;transform:translateX(-50%);background:#E10600;color:#fff;font-weight:700;font-size:13px;padding:1px 8px;border-radius:3px}
.swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.swatches button{aspect-ratio:1;border-radius:4px;border:1px solid rgba(0,0,0,.18);position:relative}
.swatches button[aria-pressed=true]{outline:2.5px solid var(--ink);outline-offset:2px}
.accs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.accs button{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid var(--line);font-size:13.5px;text-align:left}
.accs button:nth-child(3n+1),.accs button:nth-child(3n+2){border-right:1px solid var(--line)}
.accs button svg{flex:none}
.accs button[aria-pressed=true]{background:var(--ink);color:#fff}
.legend{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.legend input{width:52px;height:40px;font:700 20px 'Archivo Narrow','IBM Plex Sans KR',sans-serif;text-align:center;border:1.5px solid var(--ink);border-radius:4px;background:#fff}
.list{border-top:1px solid var(--line)}
.opt{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:16px;width:100%;padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
.opt b{font-size:16px}
.opt .ex{font-family:'D2 coding','D2Coding',monospace;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt .v{font-family:'Archivo Narrow';font-weight:700;font-size:24px;line-height:1}
.opt .v small{font-family:'IBM Plex Sans KR';font-weight:400;font-size:12px;margin-left:3px}
.opt:hover{background:#E6E6E1}
.opt[aria-pressed=true]{background:var(--ink);color:#fff}.opt[aria-pressed=true] .ex{color:#B9B9C2}
.opt.lv{grid-template-columns:120px 1fr auto}
.opt .d{font-size:13px;color:var(--muted)}.opt[aria-pressed=true] .d{color:#B9B9C2}
.plus{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-top:10px;color:var(--muted);cursor:pointer}
.plus input{width:16px;height:16px;accent-color:var(--ink)}
.plus[aria-disabled=true]{opacity:.4;pointer-events:none}
.foes{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px;color:var(--muted)}
.foes span{font-family:'Archivo Narrow';font-weight:700;color:var(--ink);font-size:14px}
.start{margin-top:22px;width:100%;height:56px;background:#E10600;color:#fff;font-weight:700;font-size:18px;border-radius:4px;display:flex;align-items:center;justify-content:center}
.start:hover{background:#C40500}
.start kbd{opacity:.85}
.fine{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.6}

/* 레이스 화면 */
.play{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:0 32px 24px}
.tower{background:#15151E;color:#fff;border-radius:6px;padding:8px 0;font-size:13px;overflow:hidden;position:relative;align-self:start}
.tower .hd{display:flex;justify-content:space-between;padding:0 14px 6px;color:#9D9DA8;font-size:12px;border-bottom:1px solid #2C2C38;margin-bottom:4px}
.rows{position:relative;height:130px}
.row{position:absolute;left:0;right:0;display:grid;grid-template-columns:18px 10px 1fr 52px;align-items:center;gap:8px;padding:0 12px;height:20px;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.row .p{font-family:'Archivo Narrow';font-weight:700;text-align:right}
.row .sw{width:8px;height:8px;border-radius:2px}
.row .gap{white-space:nowrap;font-family:'Archivo Narrow';text-align:right;color:#C9C9D2}
.row.me{background:#fff;color:#15151E}.row.me .gap{color:#15151E}
.row.done .gap{color:#7CE3A2}.row.me.done .gap{color:#15803D}
.row.out .gap{color:#FF7A70}
.row .mv{font-size:10px;margin-left:5px}.row .mv.u{color:#2BD06A}.row .mv.d{color:#FF5A4E}
.tower .keys{border-top:1px solid #2C2C38;margin-top:8px;padding:8px 14px 2px;color:#8D8D99;font-size:12px;line-height:1.8}
.tower .keys kbd{color:#C9C9D2;margin:0 4px 0 0}
.race{position:relative;border-radius:6px;overflow:hidden;background:#3B3D45}
.hud{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;gap:26px;padding:0 16px;background:#15151E;color:#fff;z-index:30}
.hud .k{font-size:12px;color:#A9A9B5}.hud .v{font-family:'Archivo Narrow';font-weight:700;font-size:25px;line-height:1}
.hud .sec{display:flex;gap:4px;margin-left:auto;align-items:center}
.hud .sec span{width:58px;height:8px;border-radius:2px;background:#33333F}
.hud .sec span.on{background:#7CE3A2}.hud .sec span.now{background:#F5C542}
.hud .sec em{font-style:normal;font-size:12px;color:#A9A9B5;margin-right:6px}
.mini{position:absolute;left:0;right:0;top:52px;height:30px;background:#202129;z-index:30}
.mini .ln{position:absolute;left:16px;right:16px;top:14px;height:2px;background:#4A4B57}
.mini .fl{position:absolute;right:16px;top:6px;width:4px;height:18px;background:repeating-linear-gradient(#fff 0 3px,#15151E 3px 6px)}
.mini .cam{position:absolute;top:4px;height:22px;border:1.5px solid #F5C542;border-radius:3px}
.mini .dt{position:absolute;top:11px;width:8px;height:8px;margin-left:-4px;border-radius:50%;border:1px solid rgba(0,0,0,.4)}
.mini .dt.me{width:12px;height:12px;top:9px;margin-left:-6px;border:2px solid #fff;z-index:2}
.tbar{position:absolute;left:0;top:82px;height:4px;background:#E10600;z-index:30;width:0}
.view{position:absolute;left:0;right:0;bottom:0;top:86px;overflow:hidden}
.world{position:absolute;left:0;top:0;bottom:0;will-change:transform}
.stand{position:absolute;left:0;top:0;height:44px;background:radial-gradient(circle at 5px 6px,#8C8E99 2.2px,transparent 2.6px) 0 0/11px 11px,#2A2B33}
.board{position:absolute;top:8px;height:26px;padding:0 8px;background:#F1F1EE;color:#15151E;font-family:'Archivo Narrow';font-weight:700;font-size:15px;line-height:26px;border-radius:3px;white-space:nowrap}
.board small{font-family:'IBM Plex Sans KR';font-weight:500;font-size:11px;margin-left:3px}
.asphalt{position:absolute;left:0;bottom:0;background:#3B3D45}
.kerb{position:absolute;left:0;height:9px;background:repeating-linear-gradient(90deg,#E10600 0 22px,#fff 22px 44px)}
.lane{position:absolute;left:0;height:0;border-top:1.5px dashed rgba(255,255,255,.22)}
.lnum{position:absolute;font-family:'Archivo Narrow';font-weight:700;font-size:14px;color:rgba(255,255,255,.45)}
.slot{position:absolute;width:30px;height:18px;border:2px solid rgba(255,255,255,.5);border-right:0}
.secline{position:absolute;width:3px;background:rgba(245,197,66,.6)}
.seclab{position:absolute;font-size:12px;color:rgba(255,255,255,.6);transform:translateX(-50%);white-space:nowrap}
.finishline{position:absolute;width:18px;background:repeating-conic-gradient(#15151E 0 25%,#fff 0 50%) 0 0/18px 18px}
.pit{position:absolute;top:0;bottom:0;background:#ECECE7;border-left:3px solid #15151E}
.pit h4{font-size:12px;font-weight:500;color:var(--muted);padding:10px 12px 0}
.pod{position:absolute;width:44px;background:#15151E;color:#fff;font-family:'Archivo Narrow';font-weight:700;text-align:center;padding-top:4px;font-size:17px;border-radius:3px 3px 0 0}
.race.final{box-shadow:inset 0 0 0 3px #E10600}
.race.final .asphalt{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{background:#46383D}}
.runner{position:absolute;z-index:10}
.runner.done{transition:left .6s ease,top .6s ease}
.runner .nm{position:absolute;left:50%;transform:translateX(-50%);top:-17px;font-size:11.5px;white-space:nowrap;color:#fff;background:rgba(21,21,30,.85);padding:0 5px;border-radius:3px}
.runner.me{z-index:20}.runner.me .nm{background:#E10600;font-weight:700}
.runner .trail{position:absolute;right:100%;top:12px;width:34px;height:18px;margin-right:-6px;opacity:0;transition:opacity .2s}
.runner .trail b{display:block;height:2px;margin:3px 0;background:rgba(255,255,255,.55);border-radius:1px;animation:streak .35s linear infinite}
.runner .trail b:nth-child(2){margin-left:10px;animation-delay:.12s}.runner .trail b:nth-child(3){margin-left:4px;animation-delay:.24s}
@keyframes streak{from{transform:translateX(10px);opacity:1}to{transform:translateX(-12px);opacity:0}}
.runner.fast .trail{opacity:1}
.pop{position:absolute;left:50%;top:-42px;transform:translateX(-50%);font-family:'Archivo Narrow';font-weight:700;color:#7CE3A2;font-size:17px;animation:pop 1.1s ease-out forwards}
@keyframes pop{from{opacity:1;transform:translate(-50%,6px)}to{opacity:0;transform:translate(-50%,-12px)}}
.lights{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;gap:10px;background:#15151E;padding:14px 18px;border-radius:10px;z-index:40;transition:opacity .3s}
.lights i{width:34px;height:34px;border-radius:50%;background:#2E2E38}
.lights i.on{background:#E10600;box-shadow:0 0 18px #E10600}
.lights.go{opacity:0;pointer-events:none}
.lights.blink i.on{animation:blink .5s steps(2) infinite}
@keyframes blink{50%{background:#2E2E38;box-shadow:none}}

/* 치는 글 */
.panel{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;margin-top:38px;position:relative}
.txt{font-family:'D2 coding','D2Coding',Consolas,monospace;font-size:25px;line-height:1.7;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;position:relative;max-height:calc(1.7em * 4);overflow:hidden;color:var(--faint)}
.txt.py{white-space:pre;word-break:normal;max-height:none}
.txt.py.long{font-size:20px;line-height:1.5}
.txt .ln{display:flex;gap:18px}.txt .no{color:var(--faint);font-size:.7em;padding-top:.35em;width:1em;text-align:right;flex:none;user-select:none}
.txt .d{color:var(--ink)}
.txt .c{color:var(--ink);box-shadow:inset 0 -3px 0 var(--ink)}
.txt .x{background:#E10600;color:#fff;border-radius:2px}
.txt .ime{color:var(--ink);box-shadow:inset 0 -2px 0 #3E7BFA;background:#E3EBFF}
.txt .nl::after{content:"↵";font-size:.6em;color:var(--faint);margin-left:1px}
.txt .x.nl::after{color:#fff}
.hint{position:absolute;left:0;top:-32px;font-size:13px;color:#fff;background:#E10600;padding:2px 8px;border-radius:3px;opacity:0;transition:opacity .15s;pointer-events:none}
.hint.on{opacity:1}
.stats{display:flex;gap:30px}.stat .v{font-size:36px;font-weight:600;line-height:1}.stat .k{font-size:12.5px;color:var(--muted);margin-top:5px}
#ta{position:absolute;left:0;top:0;width:2px;height:28px;opacity:0;border:0;padding:0;resize:none;font-size:16px;caret-color:transparent;overflow:hidden;z-index:-1}

/* 결과 */
.result{position:fixed;inset:0;background:rgba(21,21,30,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.rcard{background:var(--bg);width:min(640px,100%);border-radius:6px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.rhead{background:#15151E;color:#fff;padding:20px 24px;display:flex;align-items:flex-end;gap:18px}
.rhead .big{font-family:'Archivo Narrow';font-weight:700;font-size:64px;line-height:.9}
.rhead .big.out{font-family:'IBM Plex Sans KR';font-size:40px}
.rhead .sub{color:#A9A9B5;font-size:14px;padding-bottom:4px}
.rhead .new{margin-left:auto;background:#F5C542;color:#15151E;font-weight:700;font-size:13px;padding:3px 10px;border-radius:3px;align-self:center}
.rstats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.rstats>div{padding:16px 24px}.rstats>div+div{border-left:1px solid var(--line)}
.rstats .v{font-family:'Archivo Narrow';font-weight:700;font-size:34px;line-height:1}.rstats .k{font-size:12.5px;color:var(--muted);margin-top:4px}
.rbest{padding:10px 24px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line)}
.rtab{width:100%;border-collapse:collapse;font-size:14px}
.rtab td{padding:7px 24px;border-bottom:1px solid var(--line)}
.rtab td:first-child{width:56px;font-family:'Archivo Narrow';font-weight:700;font-size:16px}
.rtab td:last-child{text-align:right;font-family:'Archivo Narrow';font-size:16px}
.rtab tr.me{background:#fff;font-weight:700}
.rtab .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:8px}
.rbtn{display:grid;grid-template-columns:1fr 1fr;gap:0}
.rbtn button{height:54px;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.rbtn .again{background:#E10600;color:#fff}.rbtn .again:hover{background:#C40500}
.rbtn .back:hover{background:#E6E6E1}


/* 소리 버튼 */
.tright{display:flex;align-items:center;gap:18px;min-width:0}
.sound{display:flex;align-items:center;gap:6px;position:relative}
.sbtn{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1.5px solid var(--line);border-radius:4px;font-size:13px;color:var(--muted);background:#fff;white-space:nowrap}
.sbtn:hover{border-color:var(--ink);color:var(--ink)}
.sbtn .slash{display:none}.sbtn[aria-pressed=false] .slash{display:inline}.sbtn[aria-pressed=false] .wave{display:none}
.sbtn[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
.sbtn.bgm{height:38px;padding:0 14px;border:2px solid var(--ink);color:var(--ink);font-size:14px}
.sbtn.bgm b{font-weight:700}
.sbtn.bgm[aria-pressed=true]{background:var(--ink);color:#fff}
.sbtn.bgm[aria-pressed=true] b{color:#7CE3A2}
.sbtn.bgm .eq{display:none;align-items:flex-end;gap:2px;height:14px}
.sbtn.bgm .eq i{width:3px;background:#7CE3A2;animation:eq .9s ease-in-out infinite}
.sbtn.bgm .eq i:nth-child(2){animation-delay:-.3s}.sbtn.bgm .eq i:nth-child(3){animation-delay:-.6s}.sbtn.bgm .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.sbtn.bgm[aria-pressed=true] .eq{display:flex}.sbtn.bgm[aria-pressed=true] .note{display:none}
.nudge{position:absolute;left:0;top:calc(100% + 9px);z-index:50;background:#E10600;color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:3px;white-space:nowrap;pointer-events:none;animation:nudge 1.2s ease-in-out 4}
.nudge::after{content:"";position:absolute;left:18px;top:-5px;border:5px solid transparent;border-top:0;border-bottom-color:#E10600}
.nudge.off{display:none}
@keyframes nudge{50%{transform:translateY(4px)}}
/* 자막 (관전·미완주) */
.cap{position:absolute;left:16px;bottom:18px;z-index:35;display:flex;align-items:stretch;opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .3s;pointer-events:none}
.cap.on{opacity:1;transform:none}
.cap b{background:#E10600;color:#fff;padding:6px 10px;font-size:14px;font-weight:700}
.cap span{background:#15151E;color:#fff;padding:6px 12px;font-size:14px}
/* 내 기록 */
.hist{border:1px solid var(--line);border-radius:4px;background:#fff;padding:10px 12px 6px;min-height:60px;font-size:13px;color:var(--muted)}
.hist svg{display:block;width:100%;height:auto}
.hist .bests{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:12.5px}
.hist .bests b{font-family:'Archivo Narrow';font-size:15px;color:var(--ink);margin-left:3px}
@media (max-width:820px){.tright .meta{display:none}.sbtn .lab{display:none}.sbtn.bgm .lab{display:inline}.nudge{display:none}}
@media (max-width:820px){
  .setup{grid-template-columns:1fr;gap:8px;padding:8px 16px 32px}
  .play{grid-template-columns:1fr;padding:0 16px 24px}.tower{display:none}
  .top{padding:12px 16px}.meta{display:none}
  .panel{grid-template-columns:1fr}.txt{font-size:20px}
  .opt{grid-template-columns:90px 1fr auto}
}
@media (prefers-reduced-motion:reduce){.race *,.race,.ch *{animation:none!important;transition:none!important}}

/* ===================== OS타자 추가 (방·교사·칠판) ===================== */
a{color:inherit}
.top .brand{text-decoration:none;color:var(--ink)}
.top .brand small{font-size:13px}
[hidden]{display:none!important}
/* 첫 화면 */
body.home{display:flex;min-height:100vh;align-items:center;justify-content:center}
.hero{width:min(720px,100%);padding:24px 16px;text-align:center;position:relative}
.hero .logo{font-family:'Archivo Narrow','IBM Plex Sans KR',sans-serif;font-size:72px;letter-spacing:-.02em;line-height:1}
.hero .school{color:var(--muted);font-size:14px;margin-top:8px}
.hero-track{position:relative;height:96px;margin:0 auto 18px;background:#3B3D45;border-radius:6px;overflow:hidden;
  background-image:repeating-linear-gradient(90deg,#E10600 0 22px,#fff 22px 44px),repeating-linear-gradient(90deg,#E10600 0 22px,#fff 22px 44px);background-size:100% 7px;background-repeat:no-repeat;background-position:0 0,0 100%}
.hero-track span{position:absolute;left:-60px;animation:herorun 9s linear infinite}
@keyframes herorun{to{left:100%}}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;text-align:left}
.choice{display:flex;flex-direction:column;gap:6px;padding:22px 22px;border:2px solid var(--ink);border-radius:6px;text-decoration:none;background:#fff}
.choice b{font-size:22px}.choice span{font-size:13.5px;color:var(--muted)}
.choice:hover{background:#E6E6E1}
.choice.dark{background:var(--ink);color:#fff}.choice.dark span{color:#B9B9C2}.choice.dark:hover{background:#2A2B35}
/* 입장 화면 */
.gate{width:min(460px,100%);margin:28px auto;padding:0 16px}
.gate.wide{width:min(760px,100%)}
.gate h1{font-size:24px;margin-bottom:14px}
.gate h2{font-size:13px;font-weight:500;color:var(--muted);margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.gate label,.gform label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);margin-bottom:12px}
input,select,textarea{font:inherit;color:var(--ink)}
.gate input,.gform input,.gform select,.gform textarea,.tsec input,.tsec select,.ctrl select{height:42px;padding:0 12px;border:1.5px solid var(--line);border-radius:4px;background:#fff;font-size:16px}
.gform textarea{height:auto;padding:10px 12px}
.gate input:focus,.tsec input:focus,.tsec select:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
#j-code{font-family:'Archivo Narrow';font-size:28px;letter-spacing:.2em;height:52px}
.notice{font-size:12.5px;color:var(--muted);line-height:1.6;background:#E8E8E3;padding:10px 12px;border-radius:4px;margin:6px 0 10px}
.err{color:var(--err);font-size:13.5px;min-height:1.4em;margin-bottom:6px}
.charrow{display:grid;grid-template-columns:260px 1fr;gap:28px}
.charrow .preview{height:180px}
.mono{font-family:'D2 coding','D2Coding',Consolas,monospace!important;font-size:15px!important}
/* 방 (학생) */
.room{grid-template-columns:200px 1fr}
.room .race{height:clamp(330px,calc(100vh - 360px),520px)}
.room .rows{height:232px}
.room .panel{margin-top:44px}
.mainc{position:relative;min-width:0}
.lobby{background:#3B3D45;border-radius:6px;min-height:380px;padding:18px 20px;color:#fff;position:relative;overflow:hidden;
  background-image:repeating-linear-gradient(90deg,#E10600 0 22px,#fff 22px 44px),repeating-linear-gradient(90deg,#E10600 0 22px,#fff 22px 44px);background-size:100% 9px;background-repeat:no-repeat;background-position:0 0,0 100%}
.lb-head{display:flex;gap:14px;align-items:baseline;margin:6px 0 16px}.lb-head b{font-size:18px}.lb-head span{color:#B9B9C2;font-size:14px}
.lb-grid{display:flex;flex-wrap:wrap;gap:10px 14px;align-content:flex-start;border-left:4px solid rgba(255,255,255,.5);padding-left:14px}
.lb-grid figure{display:flex;flex-direction:column;align-items:center;gap:2px;width:64px;font-size:11.5px;animation:arrive .5s ease-out}
.lb-grid figure.me figcaption{background:#E10600;color:#fff;border-radius:3px;padding:0 4px;font-weight:700}
.lb-grid figure.off{opacity:.35}
.lb-grid figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px;color:#EDEDF0}
@keyframes arrive{from{transform:translateX(-24px);opacity:0}}
.phead{position:absolute;left:0;right:0;top:-34px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.phead .hint{position:static}
.phead>div:last-child{pointer-events:auto}
.panel .hint{position:static}
.fsz{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--muted)}
.fsz span{margin-right:4px}
.fsz button{width:28px;height:26px;border:1.5px solid var(--line);background:#fff;border-radius:3px;line-height:1}
.fsz button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.txt .wait{color:var(--muted);font-family:'IBM Plex Sans KR',sans-serif;font-size:17px}
.keys b.ok{color:#7CE3A2}.keys b.bad{color:#FF7A70}
.row .nmx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nmx i,.runner .nm i{font-style:normal;font-size:9.5px;opacity:.7;margin-left:2px}
.row.ai{color:#B9B9C2}
.runner.ghost{opacity:.35}
.runner.out{opacity:.45}
.runner .nm{display:none}
.runner.lab .nm,.runner.me .nm{display:block}
.cheerbar{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px 12px;background:#15151E;border-radius:6px;color:#fff;font-size:13px;flex-wrap:wrap}
.cheerbar button{background:none;border:0;padding:0;cursor:pointer}.cheerbar button:disabled{opacity:.35}
#cheerbtns{display:flex;gap:6px;flex-wrap:wrap}
.stk{display:inline-flex;align-items:center;gap:4px;color:#fff;font-weight:700;font-size:13px;padding:3px 9px 3px 6px;border-radius:999px;white-space:nowrap}
.stk.sm{font-size:12px;padding:2px 8px 2px 5px}
.cheers{position:absolute;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.cheer{position:absolute;bottom:20px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;animation:cheerup 2.6s ease-out forwards}
.cheer em{font-style:normal;font-size:11px;color:#fff;background:rgba(21,21,30,.8);padding:0 5px;border-radius:3px}
@keyframes cheerup{0%{transform:translateY(20px);opacity:0}15%{opacity:1}100%{transform:translateY(-180px);opacity:0}}
.rhead .sub{color:#A9A9B5;font-size:14px;padding-bottom:4px}
.rhead .new.bad{background:#FF7A70}
.rtab tr.gapr td{border-top:2px dashed var(--line)}
.rwait{padding:14px 24px;color:var(--muted);font-size:14px}
.rbtn.one{grid-template-columns:1fr}
.rbtn a{display:flex;align-items:center;justify-content:center;height:54px;font-weight:700;text-decoration:none}
.mission{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;width:min(760px,calc(100% - 32px))}
.mscard{background:#15151E;color:#fff;border-radius:6px;padding:14px 18px 16px;box-shadow:0 20px 50px rgba(0,0,0,.4);border:2px solid #F5C542}
.mhead{display:flex;justify-content:space-between;align-items:baseline}.mhead b{color:#F5C542;font-size:18px}
#m-msg{font-size:13.5px;color:#C9C9D2;margin:6px 0 10px}
.mpanel{margin-top:0;grid-template-columns:1fr;background:#F1F1EE;border-radius:4px;padding:10px 14px}
.mpanel .txt{max-height:none}
/* ===================== 교사 화면 ===================== */
body.teacher{min-height:100vh}
.tnav{display:flex;align-items:center;gap:16px;font-size:14px}
.tnav a{text-decoration:none;color:var(--muted)}.tnav a:hover{color:var(--ink)}
.tnav .who{color:var(--ink);font-weight:500}
.inl{display:inline}
.lnk{background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline;padding:0 4px}
.lnk.danger,.danger{color:var(--err)}
button.danger{background:#fff;border:1.5px solid var(--err);border-radius:4px;padding:6px 12px;font-weight:700;cursor:pointer}
.flashes{padding:0 32px}.flash{padding:8px 12px;border-radius:4px;font-size:14px;margin-bottom:8px;background:#E3F5EA}.flash.error{background:#FDE4E2;color:#9A1A12}
.tmain{padding:0 32px 40px}
.cols{display:grid;grid-template-columns:1fr minmax(360px,460px);gap:40px;align-items:start}
.tsec h1{font-size:20px;margin:6px 0 12px;display:flex;align-items:center;gap:12px}
.tsec h1.mt,.mt{margin-top:28px}
.tsec h2{font-size:13px;font-weight:500;color:var(--muted);margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.tsec.wide{max-width:960px}
.tlist{border-top:1px solid var(--line)}
.trow{display:grid;grid-template-columns:90px 1fr auto auto;gap:14px;align-items:center;padding:12px 10px;border-bottom:1px solid var(--line);text-decoration:none}
a.trow:hover{background:#E6E6E1}
.trow .code{font-family:'Archivo Narrow';font-weight:700;font-size:20px}
.trow .go{font-weight:700;font-size:13px}
.trow .acts{display:flex;gap:10px;font-size:13px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.trow.static{grid-template-columns:90px 1fr auto}
.trow.static .acts{grid-column:1/-1;justify-content:flex-start}
.mute{color:var(--muted);font-size:13px;font-weight:400}
.empty{color:var(--muted);font-size:14px;padding:14px 0}
.frow{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);margin-bottom:12px}
.frow.small{flex-direction:row;align-items:center;justify-content:space-between;margin:10px 0 0;white-space:nowrap;gap:10px}
.frow.small select{width:auto;flex:1}
.frow.small select{height:34px;font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row2.small{margin-top:8px}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;margin:8px 0}
.chk input{width:16px;height:16px;accent-color:var(--ink)}
.chk.small{font-size:13px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mcard{display:flex;flex-direction:column;gap:4px;border:1.5px solid var(--line);border-radius:4px;padding:10px 12px;cursor:pointer;background:#fff}
.mcard input{display:none}.mcard b{font-size:16px}.mcard span{font-size:12px;color:var(--muted)}
.mcard:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}.mcard:has(input:checked) span{color:#B9B9C2}
.course summary{cursor:pointer;font-size:14px;margin:6px 0 10px}
.crow{display:grid;grid-template-columns:40px 1fr 90px;gap:8px;align-items:center;margin-bottom:6px;font-size:13px;color:var(--muted)}
.crow select{height:34px!important;font-size:14px!important}
.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border:1.5px solid var(--ink);border-radius:4px;background:#fff;font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;color:var(--ink)}
.btn:hover{background:#E6E6E1}
.del summary{cursor:pointer;color:var(--err);font-size:13px;list-style:none}
.del form{display:inline-block;margin-left:8px}
.btab{width:100%;border-collapse:collapse;font-size:14px}
.btab td,.btab th{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}
/* 방 진행 화면 */
.troom{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start;padding-top:4px}
.ctrl{display:flex;flex-direction:column;gap:12px;position:sticky;top:8px;max-height:calc(100vh - 80px);overflow:auto}
.ctop{display:flex;flex-direction:column;gap:2px}.ctop .rt{font-size:18px}
.cbox{background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 14px}
.cbox h3{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:8px}
.cbox .start{height:50px;margin-top:10px;font-size:17px}
.cbox .start:disabled{background:#A9A9B0;cursor:default}
.ctrl select{height:38px;font-size:14px;width:100%}
.plist{display:flex;flex-direction:column}
.pl{display:grid;grid-template-columns:10px 1fr auto;gap:2px 8px;align-items:center;padding:6px 0;border-bottom:1px solid #EEE;font-size:13px}
.pl .dot{width:8px;height:8px;border-radius:50%;background:#3BAF75}.pl.off .dot{background:#C9C9C2}
.pl.dead .nm b{color:var(--muted)}
.pl .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .pt{font-family:'Archivo Narrow';font-weight:700;font-size:14px}
.pl .lnk{grid-column:2/4;justify-self:start;font-size:12px}
.pl .lnk+.lnk{grid-column:auto}
.pl{grid-template-columns:10px 1fr auto auto auto}
.pl .lnk{grid-column:auto}
.warn{color:#D97706;font-weight:700}
.pend{font-size:12.5px;padding:8px;background:#FFF4E0;border-radius:4px;margin-bottom:8px}
.stage{position:relative;min-height:560px}
.corner{display:none}
.sv-lobby{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.bigcode{display:flex;flex-direction:column;align-items:center;gap:14px;background:#15151E;color:#fff;border-radius:6px;padding:22px 26px}
.bigcode>div{display:flex;flex-direction:column;align-items:center}
.bigcode .k{font-size:14px;color:#A9A9B5}
.bigcode b{font-size:84px;letter-spacing:.06em;line-height:1}
.bigcode .url{font-size:15px;color:#C9C9D2;margin-top:6px}
.bigcode .qr{width:200px;height:200px;background:#fff;padding:8px;border-radius:4px}
.gather{background:#3B3D45;border-radius:6px;padding:16px 18px;min-height:400px;color:#fff}
.g-head{display:flex;gap:12px;align-items:baseline;margin-bottom:14px}.g-head b{font-family:'Archivo Narrow';font-size:34px}.g-head span{color:#B9B9C2}
.sv-race{display:grid;grid-template-columns:230px 1fr;gap:16px}
.tower.btower .rows{height:440px}
.race.tall{height:560px}
.race.tall .view{top:86px}
.sv-result{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 22px;min-height:400px}
.res-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}.res-head b{font-size:26px}.res-head span{color:var(--muted)}
.res-body{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
.res-col h3{font-size:13px;color:var(--muted);font-weight:500;margin-bottom:6px}
.res-body .btab td{font-size:16px;vertical-align:middle}
.res-body .btab td svg{vertical-align:middle;margin-right:6px}
.rk{font-family:'Archivo Narrow';font-weight:700;font-size:20px!important;width:40px}
.alive{display:flex;flex-wrap:wrap;gap:8px 12px}
.alive span{display:flex;align-items:center;gap:4px;font-size:14px}
.res-foot{margin-top:14px;color:var(--muted)}
.sv-mission{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#15151E;color:#fff;border:2px solid #F5C542;border-radius:6px;padding:8px 16px;z-index:60;font-size:15px;white-space:nowrap}
.sv-mission b{color:#F5C542;margin-right:8px}
.clickme{position:fixed;left:50%;top:12px;transform:translateX(-50%);background:#F5C542;color:#15151E;font-weight:700;padding:6px 14px;border-radius:4px;z-index:200;font-size:14px}
/* 칠판 모드 (B: 같은 창 / A: 새 창) — 학생 목록·⚠·원래 이름은 안 보임 */
body.boardmode{background:#0E0E14;overflow:hidden}
body.boardmode .tbar-t,body.boardmode .flashes,body.boardmode .ctrl{display:none}
body.boardmode .tmain{padding:12px}
body.boardmode .troom{grid-template-columns:1fr}
body.boardmode .stage{min-height:calc(100vh - 24px)}
body.boardmode .race.tall{height:calc(100vh - 40px)}
body.boardmode .tower.btower .rows{height:calc(100vh - 120px)}
body.boardmode .sv-result{min-height:calc(100vh - 24px);font-size:18px}
body.boardmode .res-body .btab td{font-size:20px}
body.boardmode .gather{min-height:calc(100vh - 24px)}
body.boardmode .bigcode b{font-size:120px}
body.boardmode .bigcode .qr{width:280px;height:280px}
body.boardmode .corner{display:flex;position:fixed;right:10px;bottom:10px;gap:6px;z-index:150;opacity:0;transition:opacity .2s}
body.boardmode .corner:hover{opacity:1}
body.boardonly .corner [data-a=exit]{display:none}
.corner.msg::before{content:attr(data-msg);position:absolute;bottom:44px;right:0;background:#E10600;color:#fff;padding:4px 10px;border-radius:3px;font-size:13px;white-space:nowrap}
.corner.msg{opacity:1}
@media (max-width:820px){
  .choices{grid-template-columns:1fr}.hero .logo{font-size:56px}
  .charrow{grid-template-columns:1fr}
  .room{grid-template-columns:1fr}.room .tower{display:none}
  .cols,.troom,.sv-lobby,.sv-race,.res-body{grid-template-columns:1fr}
  .tmain{padding:0 16px 32px}.ctrl{position:static;max-height:none}
  .modes{grid-template-columns:1fr}
}