@font-face{font-family:"Pretendard";src:url(../fonts/Pretendard-500.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Pretendard";src:url(../fonts/Pretendard-800.woff2) format("woff2");font-weight:700 900;font-display:swap}
/* 퀴즈골목 — 강의 덱 토큰(잉크·블루·빨강·노랑) + 두꺼운 잉크 테두리·하드 섀도. 정본 규칙 I */
:root{
  --paper:#fff;--bg:#f4f1ea;--ink:#14232f;--ink2:#243745;--muted:#5b6b7a;--line:#c9d6e2;
  --blue:#0b5aa2;--blue-soft:#e8f1fa;--red:#c8102e;--red-soft:#fdeef0;--pen:#e8193c;--yel:#ffd84d;--hero:#ffe08a;
  --teal:#0f7c7a;--teal-soft:#e6f4f3;--amber:#b45f06;--amber-soft:#fff3e0;--green:#1f8a4c;--green-soft:#e6f6ec;
  --purple:#6a3fb5;--pink:#d6336c;
  --shadow:5px 5px 0 var(--ink);--r:14px;
  /* 글씨 계층(정본 I1): 발문 --stem-size 가 항상 선택지 --opt-max 보다 크다(최소 1.3배). 힌트는 --hint-size. */
  --stem-size:clamp(25px,2.7vw,33px);--opt-max:23px;--hint-size:19px;
  --t-red:#e8193c;--t-blue:#1f6fd1;--t-teal:#0f9b98;--t-amber:#e08a14;--t-green:#2f9e57;--t-purple:#7b4fd1;--t-pink:#e0508f;--t-ink:#243745;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Pretendard,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;word-break:keep-all;-webkit-tap-highlight-color:transparent}
body{background-image:radial-gradient(rgba(20,35,47,.07) 1px,transparent 1px);background-size:22px 22px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
a{color:var(--blue)}
.wrap{max-width:1200px;margin:0 auto;padding-inline:14px}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:3px solid var(--ink);border-radius:12px;background:#fff;padding:10px 16px;font-weight:800;font-size:16px;box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s;white-space:nowrap;text-decoration:none;color:var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--blue);color:#fff}.btn.red{background:var(--red);color:#fff}.btn.yel{background:var(--yel)}.btn.green{background:var(--green);color:#fff}.btn.ghost{box-shadow:none;border-width:2px}
.btn.sm{padding:5px 10px;font-size:13px;border-width:2px;box-shadow:2px 2px 0 var(--ink);border-radius:9px}
.btn.big{font-size:20px;padding:14px 22px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.input,select.input,textarea.input{width:100%;border:3px solid var(--ink);border-radius:11px;padding:10px 12px;font-size:16px;font-weight:700;background:#fff;outline:none}
.input:focus{box-shadow:0 0 0 4px var(--yel)}
label.f{display:block;font-weight:800;font-size:13px;color:var(--muted);margin:12px 0 5px}
.pill{display:inline-flex;align-items:center;gap:5px;border:2px solid var(--ink);border-radius:999px;padding:2px 10px;font-weight:800;font-size:12.5px;background:#fff;white-space:nowrap}
.pill.blue{background:var(--blue-soft);border-color:var(--blue);color:#0d3d68}.pill.red{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.pill.green{background:var(--green-soft);border-color:var(--green);color:var(--green)}.pill.amber{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.pill.gray{background:#eef2f5;border-color:#8d9aa7;color:var(--muted)}.pill.purple{background:#efe7fb;border-color:var(--purple);color:var(--purple)}
.muted{color:var(--muted)}.err{color:var(--red);font-weight:800;min-height:1.3em;margin:8px 0 0}
.hl{background:linear-gradient(transparent 58%,var(--yel) 58%)}
.stars{color:var(--amber);letter-spacing:1px}

/* 상단 바 */
.topbar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:3px solid var(--ink)}
.topbar .wrap{display:flex;align-items:center;gap:10px;min-height:52px;padding-block:5px}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:17px;letter-spacing:-.4px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.brand .logo{width:30px;height:30px;border:3px solid var(--ink);border-radius:9px;background:var(--yel);display:grid;place-items:center;font-size:16px;box-shadow:2px 2px 0 var(--ink)}
.spacer{flex:1}
.iconbtn{border:2.5px solid var(--ink);background:#fff;border-radius:10px;width:38px;height:38px;display:grid;place-items:center;font-size:17px;box-shadow:2px 2px 0 var(--ink);flex:none}
.me-chip{font-weight:800;font-size:13px;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 첫 화면: 공부방 간판 ──────────────────────────────────────────────
   학생이 맨 처음 보는 화면이다. 규칙 설명이 아니라 '여기가 어디인가'가 먼저 온다. */
.auth{max-width:460px;margin:0 auto;padding-block:16px 40px}
.signboard{position:relative;overflow:hidden;background:var(--ink);color:#f4f1e8;border:4px solid var(--ink);border-radius:18px;
  box-shadow:6px 6px 0 var(--ink);padding:26px 18px 20px;text-align:center}
.signboard::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(120% 80% at 50% -10%,rgba(255,216,77,.28),transparent 62%),
             repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 9px)}
.signboard>*{position:relative}
.sb-lamp{position:absolute;top:-8px;left:10px;font-size:26px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation:sway 3.4s ease-in-out infinite}
.sb-lamp.r{left:auto;right:10px;animation-delay:-1.7s}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.sb-title{margin:2px 0 6px;font-family:"Batang","AppleMyungjo","Noto Serif KR",serif;font-weight:900;
  font-size:clamp(30px,8.4vw,46px);letter-spacing:-1px;line-height:1.1;color:#fff;text-shadow:0 3px 0 #000,0 0 26px rgba(255,216,77,.35)}
.sb-sub{display:flex;justify-content:center;gap:clamp(3px,1.4vw,7px);margin:0 0 12px;font-weight:900;
  font-size:clamp(13px,3.6vw,18px);color:var(--yel)}
.sb-sub span{display:inline-block;border-bottom:3px solid rgba(255,216,77,.45);padding:0 1px 3px;animation:sb-in .5s both}
.sb-sub b{width:clamp(6px,2.2vw,12px)}
.sb-sub span:nth-child(1){animation-delay:.02s}.sb-sub span:nth-child(2){animation-delay:.06s}.sb-sub span:nth-child(3){animation-delay:.1s}
.sb-sub span:nth-child(4){animation-delay:.14s}.sb-sub span:nth-child(5){animation-delay:.18s}.sb-sub span:nth-child(7){animation-delay:.24s}
.sb-sub span:nth-child(8){animation-delay:.28s}.sb-sub span:nth-child(9){animation-delay:.32s}.sb-sub span:nth-child(10){animation-delay:.36s}
@keyframes sb-in{from{opacity:0;transform:translateY(-8px) rotate(-6deg)}}
.sb-lead{margin:0;font-size:14px;font-weight:700;color:#cbd6de;line-height:1.5}
.sb-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;list-style:none;margin:12px 0 14px;padding:0}
.sb-feats li{background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);
  padding:9px 4px 8px;text-align:center;min-width:0}
.sb-feats b{display:block;font-size:20px;line-height:1.1}
.sb-feats span{display:block;font-weight:900;font-size:13.5px;letter-spacing:-.4px;margin-top:2px}
.sb-feats small{display:block;font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.3;margin-top:1px}
.auth-form{padding:16px}
.auth-foot{margin:12px 0 0;font-size:12px;font-weight:700;color:var(--muted);line-height:1.55;text-align:center}
@media (prefers-reduced-motion:reduce){.sb-lamp,.sb-sub span{animation:none}}

/* ── 간판 골목 */
.alley-head{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding-block:14px 6px}
.alley-head h1{margin:0;font-size:clamp(26px,5vw,40px);letter-spacing:-1.2px;font-weight:900}
.alley{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;padding-block:10px 50px}
.sign{position:relative;display:block;text-align:left;border:0;padding:0;background:none;color:inherit;animation:signIn .5s cubic-bezier(.3,1.5,.5,1) both}
/* 새로고침 때는 등장 애니메이션을 끈다 — 4초마다 다시 떨어지면 깜빡이는 것처럼 보인다 */
.alley.no-anim .sign{animation:none}

/* ── 과목 문(첫 화면) — 여러 학년·수업이 한 주소로 들어오므로, 첫 화면은 가게가 아니라 과목이다 */
.gate-head{margin:18px 0 14px}
.gate-head h1{margin:0;font-size:clamp(24px,6.4vw,34px);letter-spacing:-1px}
.gate-head .lead{margin:6px 0 0;font-weight:700;color:var(--muted);line-height:1.5}
.doors{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.door{display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:left;padding:14px 16px;border:3px solid var(--ink);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow);cursor:pointer;position:relative;overflow:hidden}
.door.open::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--a,#8c6e45)}
.door.open{padding-left:22px}
.door:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.door-h{display:flex;flex-direction:column;gap:2px}
.door-h b{font-size:20px;letter-spacing:-.5px}
.door-h .art{font-size:13px;font-weight:800;color:var(--muted)}
.door-h .art i{font-style:normal;color:var(--ink);background:var(--hero);border:2px solid var(--ink);border-radius:999px;padding:0 7px;margin-left:4px}
.door-b{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.door-go{align-self:flex-end;font-weight:900;color:var(--red)}
.door.locked{cursor:default;background:#f4f6f8}
.door.locked .input{flex:1 1 130px;min-width:0}
.door.locked .err{margin:0;min-height:0}
.door.locked .err:empty{display:none}
.gate-foot{margin:18px 0 30px;text-align:center}
.gate-foot .btn.big{width:min(420px,100%)}
.sign .chains{position:absolute;left:18%;right:18%;top:-14px;height:18px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.sign .board{position:relative;border:4px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:16px 16px 12px;color:#fff;overflow:hidden;background:var(--t,#e8193c)}
.sign .board:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 14px,transparent 14px 28px);pointer-events:none}
.sign .bulbs{position:absolute;left:10px;right:10px;top:6px;height:6px;background:radial-gradient(circle,#fff6a8 0 2.5px,transparent 3px) 0 0/16px 6px repeat-x;animation:bulbs 1.2s steps(2) infinite}
.sign .emoji{font-size:44px;line-height:1;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35))}
.sign .name{font-size:clamp(24px,5.4vw,30px);font-weight:900;letter-spacing:-1px;line-height:1.1;margin:8px 0 2px;text-shadow:2px 2px 0 rgba(0,0,0,.35);-webkit-text-stroke:.5px rgba(0,0,0,.2)}
.sign .tag{font-weight:700;font-size:14.5px;opacity:.95;min-height:1.2em}
.sign .lamp{position:absolute;right:12px;top:14px;display:flex;align-items:center;gap:5px;background:#14232f;color:#9dff9d;border-radius:999px;padding:3px 10px 3px 8px;font-weight:900;font-size:12px}
.sign .lamp i{width:8px;height:8px;border-radius:50%;background:#56ff56;box-shadow:0 0 8px #56ff56;animation:blink 1s infinite}
.sign .lamp.ready{color:#ffe08a}.sign .lamp.ready i{background:#ffd84d;box-shadow:0 0 8px #ffd84d}
.sign .info{background:#fff;border:3px solid var(--ink);border-top:0;border-radius:0 0 12px 12px;margin:0 10px;padding:9px 12px;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-weight:800;font-size:13.5px;box-shadow:4px 4px 0 var(--ink)}
.sign .info .me{grid-column:1/-1;border-top:2px dashed var(--line);padding-top:5px;color:var(--blue)}
.sign:active .board{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.empty{padding:40px 20px;text-align:center;font-weight:800;color:var(--muted)}

/* ── 게임 화면: 한 화면 고정(정본 규칙 I1) */
body.in-game{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.in-game .topbar{position:relative;flex:none}
#scrGame{flex:1;min-height:0;width:100%;overflow:hidden}
.game{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 270px;grid-template-rows:auto minmax(0,1fr);gap:10px;padding-block:8px 10px}
.hud{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:6px 12px;flex-wrap:wrap}
.streak{display:flex;align-items:baseline;gap:3px;flex:none}
.streak .fire{font-size:22px}
.streak .num{font-size:32px;font-weight:900;letter-spacing:-1.5px;line-height:1;min-width:1.1ch;text-align:right}
.streak .of{font-weight:800;color:var(--muted);font-size:14px}
.bar{flex:1;min-width:0}
.bar .track{position:relative;height:16px;border:3px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.bar .fill{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(-45deg,var(--pen) 0 12px,#ff4d63 12px 24px);transition:width .45s cubic-bezier(.3,1.4,.5,1)}
.bar .sub{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;color:var(--muted);margin-top:2px}
.hud.bump .num{animation:bump .5s}
.skillbtn{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:82px;height:44px;padding:1px 8px;border:3px solid var(--ink);border-radius:11px;background:#eef2f5;color:var(--muted);box-shadow:2px 2px 0 var(--ink);line-height:1.1}
.skillbtn .sw{font-size:16px;font-weight:900;white-space:nowrap}
.skillbtn small{font-size:10px;font-weight:800;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skillbtn.ready{background:var(--red);color:#fff;animation:pulse 1.1s infinite}
.skillbtn.arm{background:var(--yel);color:var(--red);animation:shake .45s infinite}
.skillbtn.wait{background:#fff;color:var(--ink)}
.prompt{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.prompt .meta{display:flex;align-items:center;gap:5px;padding:7px 10px 0;flex-wrap:wrap}
.prompt .scene-wrap{position:relative;flex:1 1 0;min-height:70px;margin:6px 10px 0}
.scene{container-type:size;position:absolute;inset:0;border:2px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}
.scene .scene-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene .scene-svg text{font-family:Pretendard,sans-serif}
.prompt .stem{flex:none;margin:0;padding:8px 12px 10px;font-size:var(--stem-size);font-weight:900;line-height:1.3;letter-spacing:-.6px}
.prompt .stem.ox:before{content:"O X";display:inline-block;font-size:.62em;background:var(--ink);color:#fff;border-radius:7px;padding:1px 7px;margin-right:6px;vertical-align:.18em;letter-spacing:0}
.hintbtn{margin-left:auto}
.hint-pop{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;background:var(--hero);border:3px solid var(--ink);border-radius:11px;padding:10px 14px;font-weight:900;font-size:var(--hint-size);line-height:1.35;box-shadow:3px 3px 0 var(--ink);animation:rise .3s both}
.arena{position:relative;min-height:0;overflow:hidden;padding:0}
/* .arena .howto 는 2026-09-17 에 없앴다 — 게임판 왼쪽 위에서 과녁·선택지 라벨을 가렸다.
   게임 이름은 HUD 가운데(#hudRoom)에만 둔다(공식 방). 혼자 방은 그것도 감춘다. */
.side{min-height:0;display:flex;flex-direction:column;gap:10px}
.side .card{padding:9px 10px}
.side .lb-card{flex:1 1 auto;min-height:0;overflow:auto}
.side .ticker-card{flex:0 0 auto;max-height:36%;overflow:hidden}
.side h3{margin:0 0 7px;font-size:14px;font-weight:900;display:flex;align-items:center;gap:6px}
/* 익명 스위치 — 크게, 한눈에 */
.anon-sw{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;cursor:pointer;background:var(--paper)}
.anon-sw .ico{font-size:26px;line-height:1}
.anon-sw .txt{flex:1 1 auto;min-width:0}
.anon-sw .txt b{display:block;font-size:15px}
.anon-sw .txt small{display:block;font-size:12px;font-weight:700;color:var(--muted);line-height:1.35;margin-top:1px}
.anon-sw .knob{flex:none;width:46px;height:26px;border:3px solid var(--ink);border-radius:999px;background:#e9edf1;position:relative}
.anon-sw .knob::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:left .16s}
.anon-sw.on{background:var(--ink);color:#fff}
.anon-sw.on .txt small{color:#cfd8e0}
.anon-sw.on .knob{background:var(--yel)}
.anon-sw.on .knob::after{left:22px}
/* 혼자 연습 상자 */
.practice{margin-bottom:12px}
.practice h2{margin:0;font-size:19px}
.mode-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;margin-top:8px}
.mode-pick .mode-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;border:3px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);font-weight:900;font-size:12.5px;cursor:pointer}
.mode-pick .mode-card .e{font-size:24px;line-height:1}
.mode-pick .mode-card:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.lb li.anon .nm{opacity:.75;font-style:italic}
.lb-sum{display:none}
.lb{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.lb li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:6px;align-items:center;border:2px solid var(--ink);border-radius:9px;padding:5px 7px;background:#fff;transition:transform .45s cubic-bezier(.3,1.2,.5,1)}
.lb li.me{background:var(--blue-soft);border-color:var(--blue)}
.lb li.fin{background:var(--green-soft)}
.lb li.reset{animation:resetFlash .9s}
.lb .rk{font-weight:900;text-align:center}
.lb .nm{font-weight:800;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .nm small{color:var(--muted);font-weight:700}
.lb .nm i{font-style:normal;font-size:11px;margin-left:3px}
.lb .mini{height:5px;border-radius:9px;background:#e9eef3;margin-top:3px;overflow:hidden}
.lb .mini i{display:block;height:100%;background:var(--pen);transition:width .4s}
.lb li.fin .mini i{background:var(--green)}
.lb .sk{font-weight:900;font-size:15px;white-space:nowrap}
.lb .off{opacity:.55}
.ticker{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ticker li{font-weight:700;font-size:13px;border-left:4px solid var(--line);padding:1px 7px;animation:slideIn .35s both}
.ticker li.ev-finish{border-color:var(--green)}.ticker li.ev-reset{border-color:var(--red)}.ticker li.ev-streak{border-color:var(--amber)}
.ticker li.ev-skill{border-color:var(--amber);background:var(--amber-soft)}.ticker li.ev-attack{border-color:var(--pen);background:var(--red-soft)}
.sheet-toggle{display:none}
.sheet{position:absolute;inset:8px;z-index:7;display:flex;flex-direction:column;gap:8px;border:3px solid var(--ink);border-radius:12px;background:var(--hero);padding:12px 14px;box-shadow:4px 4px 0 var(--ink);overflow:auto;animation:rise .3s both}
.sheet .sh-h{font-size:15px;color:var(--red);font-weight:900}
.sheet .ans{font-size:clamp(22px,4vw,30px);font-weight:900;letter-spacing:-.8px}
.sheet p{margin:0;font-weight:700;line-height:1.5;font-size:16px}
.sheet .btn{align-self:flex-end;margin-top:auto}
.stamp{position:absolute;left:50%;top:45%;z-index:8;pointer-events:none;font-weight:900;font-size:clamp(40px,8vw,70px);letter-spacing:-2px;padding:4px 22px;border:6px solid currentColor;border-radius:16px;background:#ffffffee;transform:translate(-50%,-50%) rotate(-10deg);animation:stamp .5s cubic-bezier(.2,1.7,.4,1) both;white-space:nowrap}
.stamp.ok{color:var(--green)}.stamp.no{color:var(--red)}
.stamp small{display:block;font-size:.34em;letter-spacing:0;text-align:center;margin-top:-3px}
.mode-toast{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);pointer-events:none;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:8px 16px;font-weight:900;font-size:22px;white-space:nowrap;animation:modeToast 1.1s both}

/* ── 효과 레이어(정본 규칙 I2) */
.fx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:84}
.confetti{position:absolute;left:0;top:0;width:12px;height:16px;border:2px solid var(--ink);border-radius:3px;animation:conf 1.2s cubic-bezier(.2,.7,.4,1) forwards}
.burst{position:absolute;left:50%;top:40%;width:max-content;max-width:94vw;transform:translate(-50%,-50%);text-align:center;font-weight:900;font-size:clamp(34px,9vw,80px);line-height:1.1;letter-spacing:-2px;color:#fff;-webkit-text-stroke:3px var(--ink);text-shadow:5px 5px 0 var(--ink);animation:burstIn 2.2s both}
.burst small{display:block;font-size:max(15px,.34em);letter-spacing:0;-webkit-text-stroke:0;text-shadow:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:10px;padding:2px 12px;margin-top:6px}
.burst.atk{color:var(--yel)}.burst.hit{color:var(--pen)}.burst.fin{color:#5be38a}
.flash-red{position:fixed;inset:0;z-index:40;pointer-events:none;box-shadow:inset 0 0 0 12px var(--red);animation:fade .7s both}
.flash-atk{position:fixed;inset:0;z-index:40;pointer-events:none;background:radial-gradient(circle,rgba(232,25,60,0) 35%,rgba(232,25,60,.5));animation:fade .9s both}
.toast{position:fixed;left:50%;top:62px;z-index:90;transform:translateX(-50%);background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);padding:9px 14px;font-weight:800;max-width:calc(100vw - 28px);text-align:center;animation:toastIn .35s both}
.toast.skill{background:var(--red);color:#fff}.toast.bad{background:var(--red-soft);color:var(--red)}.toast.out{opacity:0;transition:opacity .4s}
.overlay{position:fixed;inset:0;z-index:60;background:rgba(20,35,47,.72);display:grid;place-items:center;padding:16px}
.count{font-size:min(40vw,240px);font-weight:900;color:var(--yel);-webkit-text-stroke:6px var(--ink);text-shadow:10px 10px 0 var(--ink);animation:countPop .9s both}
.intro{max-width:440px;width:100%;padding:18px;text-align:center;animation:rise .35s both}
.intro .emo{font-size:56px}
.intro h2{margin:4px 0;font-size:26px;font-weight:900;letter-spacing:-.8px}
.intro .how{font-weight:800;font-size:17px;background:var(--hero);border:3px solid var(--ink);border-radius:12px;padding:10px;margin:10px 0}
.intro ul{list-style:none;padding:0;margin:8px 0 14px;text-align:left;display:grid;gap:5px;font-weight:700}

/* ── 귀가 */
.finish{padding-block:18px 40px;display:grid;justify-items:center;text-align:center;gap:10px}
.finish h1{font-size:clamp(28px,6vw,54px);margin:0;letter-spacing:-1.5px;font-weight:900}
.finish .rankbig{font-size:clamp(64px,14vw,120px);font-weight:900;line-height:1;color:var(--red);-webkit-text-stroke:3px var(--ink);text-shadow:5px 5px 0 var(--ink)}
.finish .stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.finish .stats .card{padding:7px 14px;box-shadow:3px 3px 0 var(--ink)}
.finish .stats b{display:block;font-size:22px}
.house{width:min(200px,50vw)}

/* ── 장면 2D HTML */
.sc-chips{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:10px}
.sc-big{font-size:clamp(40px,9vw,100px);font-size:26cqh;font-weight:900;color:var(--pen);-webkit-text-stroke:3px var(--ink);text-shadow:5px 5px 0 var(--ink);animation:wobble 2.4s ease-in-out infinite}
.sc-chip-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sc-chip{font-weight:900;font-size:clamp(13px,4.6cqw,28px);border:3px solid var(--ink);border-radius:12px;padding:6px 14px;background:#fff;box-shadow:4px 4px 0 var(--ink);animation:chipIn .5s cubic-bezier(.3,1.8,.5,1) both;white-space:nowrap}
.sc-chip.c0{background:var(--blue-soft)}.sc-chip.c1{background:var(--amber-soft)}.sc-chip.c2{background:var(--teal-soft)}.sc-chip.c3{background:var(--red-soft)}
.sc-formula{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px}
.sc-f-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sc-slot{border:3px solid var(--ink);border-radius:11px;background:#fff;box-shadow:3px 3px 0 var(--ink);padding:1.4cqw 2cqw;min-width:15cqw;text-align:center;animation:chipIn .45s both}
.sc-slot em{display:block;font-style:normal;font-size:clamp(9px,2.2cqw,13px);font-weight:800;color:#fff;border-radius:6px;padding:1px 6px;margin:-2px -4px 5px}
.sc-slot b{font-size:clamp(11px,3.6cqw,22px);font-weight:900;white-space:nowrap}
.sc-slot.s0 em{background:var(--blue)}.sc-slot.s1 em{background:var(--teal)}.sc-slot.s2 em{background:var(--amber)}.sc-slot.s3 em{background:var(--green)}.sc-slot.s4 em{background:var(--red)}
.sc-slot.blank{border-style:dashed;background:var(--hero)}.sc-slot.blank b{color:var(--pen);font-size:26px}
.sc-card{position:absolute;inset:0;display:grid;place-items:center;padding:10px}
.sc-card-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);padding:14px 22px;max-width:92%;animation:chipIn .5s cubic-bezier(.3,1.8,.5,1) both}
.sc-emoji{font-size:clamp(40px,22cqh,110px);line-height:1;animation:wobble 2.4s ease-in-out infinite}
.sc-card-title{font-weight:900;font-size:clamp(16px,6cqw,34px);letter-spacing:-.5px;text-align:center}
.sc-card-line{font-weight:800;font-size:clamp(12px,4cqw,22px);background:var(--hero);border:2px solid var(--ink);border-radius:10px;padding:2px 10px;animation:chipIn .45s both;text-align:center}
.sc-badge{position:absolute;right:-12px;top:-14px;background:var(--yel);border:3px solid var(--ink);border-radius:999px;font-weight:900;font-size:clamp(14px,4.5cqw,26px);padding:0 12px;box-shadow:3px 3px 0 var(--ink);animation:wobble 2s ease-in-out infinite}
.sc-plot{position:absolute;inset:0;width:100%;height:100%}
.sc-plot .grid{stroke:#e3ebf2;stroke-width:1}
.sc-plot .axis{stroke:var(--ink);stroke-width:3}
.sc-plot .tick{font-size:12px;font-weight:700;fill:var(--muted)}
.sc-plot .alabel{font-size:14px;font-weight:900;fill:var(--ink)}
.sc-plot .line{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.sc-plot .line.dash{stroke-dasharray:.03 .02}
.sc-plot .line.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:plotDraw 1.6s ease-out forwards}
.sc-plot .slabel{font-size:15px;font-weight:900}
.sc-plot .arrow{opacity:0;animation:chipIn .5s both}
.sc-plot .arrow line{stroke:currentColor;stroke-width:5;stroke-linecap:round}
.sc-plot .arrow polygon,.sc-plot .arrow text{fill:currentColor}
.sc-plot .mark{opacity:0;animation:chipIn .45s both}
.sc-plot .mark circle{fill:var(--yel);stroke:var(--ink);stroke-width:3}
.sc-plot .mlabel{font-size:16px;font-weight:900;fill:var(--pen)}
@keyframes plotDraw{to{stroke-dashoffset:0}}
.sc-compare{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px}
.sc-cell{position:relative;border:2px dashed var(--line);border-radius:9px;overflow:hidden}
.sc-inner{position:absolute;inset:0}
.sc-tag{position:absolute;left:6px;top:6px;z-index:3;font-weight:900;font-size:16px;border:2.5px solid var(--ink);border-radius:8px;background:var(--yel);padding:0 8px}
.sc-err{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-weight:700}

/* ── 휴대폰 세로: 문제(그림+발문) 위, 게임 아래 */
@media (max-width:820px){
  body.in-game .wrap{padding-inline:7px}
  body.in-game .topbar .wrap{min-height:44px;gap:6px}
  body.in-game .brand{font-size:14px}
  body.in-game .brand .logo{width:24px;height:24px;font-size:13px;border-width:2px}
  body.in-game .iconbtn{width:32px;height:32px;font-size:14px;border-width:2px}
  body.in-game .card{border-width:2.5px;box-shadow:3px 3px 0 var(--ink);border-radius:12px}
  /* 세로: 아래 정답 게임이 화면을 너무 먹어 위의 문제·그림이 안 보였다(2026-09-17).
     게임 칸을 1.25 → 0.875(70%)로 줄여 문제 칸을 43% → 52% 로 넓힌다.
     **줄 번호를 못박는다**(2026-09-18): 얼굴 띠가 생겨 줄이 다섯이 되었는데, 띠나 순위판이
     감춰지면 자동 배치가 한 칸씩 밀려 «아래 fr 줄이 빈 채로» 남아 큰 여백이 생겼다.
     감춰진 줄은 auto 라 0 으로 접히고, 남는 높이는 문제·게임 칸(fr)이 다 먹는다. */
  .game{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,.95fr) minmax(0,.875fr) auto;gap:6px;padding-block:6px 6px;align-content:stretch}
  .game > .hud{grid-row:1}
  .game > .facestrip{grid-row:2}
  .game > .prompt{grid-row:3}
  .game > .arena{grid-row:4}
  .game > .side{grid-row:5}
  /* 빈 줄에 gap 이 남지 않게 — 감춘 칸은 자리도 차지하지 않는다 */
  .game > .facestrip[hidden],.game > .side[hidden]{display:none}
  .hud{padding:4px 8px;gap:7px}
  .streak .fire{font-size:16px}.streak .num{font-size:24px}.streak .of{font-size:11.5px}
  .bar .track{height:11px;border-width:2px}.bar .sub{font-size:10px;margin-top:1px}
  .skillbtn{min-width:64px;height:36px;border-width:2.5px}.skillbtn .sw{font-size:13px}.skillbtn small{font-size:9px;max-width:70px}
  .prompt .meta{padding:4px 7px 0}.prompt .meta .pill{font-size:10.5px;padding:0 7px}
  .prompt .scene-wrap{margin:4px 7px 0;min-height:110px}   /* 졸라맨(rig)이 너무 작게 보였다 — 바닥값을 올린다 */
  /* 2026-09-18: 한때 40~52px 로 키웠다가 «가게게임 문제 글자가 너무 크다» 는 지적으로 되돌렸다.
     키워야 할 곳은 가게가 아니라 **강호행 활극(검풍동)의 타격 중 글자**였다(action.css 참고). */
  :root{--stem-size:23px;--opt-max:18px;--hint-size:17px}
  .prompt .stem{padding:5px 9px 7px;line-height:1.28}
  .side{gap:0}
  .side .ticker-card{display:none}
  .side .lb-card{flex:none;overflow:hidden;padding:3px 8px}
  .side h3{margin:0;font-size:12px;min-height:24px}
  .lb-title{display:none}
  .lb-sum{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
  .side .lb{display:none}
  .sheet-toggle{display:inline-flex}
  .side.open .lb-card{position:fixed;left:8px;right:8px;bottom:8px;max-height:70dvh;overflow:auto;z-index:50;padding:10px}
  .side.open .lb{display:grid;margin-top:8px}
  .sheet{inset:5px;padding:9px 11px;gap:5px}
  .sheet p{font-size:14.5px}
  .stamp{font-size:40px;border-width:5px}
  .burst{font-size:38px;-webkit-text-stroke:2px var(--ink);text-shadow:3px 3px 0 var(--ink)}
}

/* ── 관리자 */
.adm{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;padding-block:12px 50px}
.adm-nav{display:flex;flex-direction:column;gap:6px;position:sticky;top:64px;align-self:start}
.adm-nav button{text-align:left;border:2.5px solid var(--ink);border-radius:10px;background:#fff;padding:9px 12px;font-weight:800;box-shadow:2px 2px 0 var(--ink)}
.adm-nav button.on{background:var(--ink);color:#fff}
.adm-main{min-width:0;display:grid;gap:14px;align-content:start}
.adm .card{padding:14px}
.adm h2{margin:0 0 10px;font-size:21px;font-weight:900;letter-spacing:-.5px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpis{display:flex;flex-wrap:wrap;gap:8px}
.kpi{border:2.5px solid var(--ink);border-radius:11px;padding:6px 12px;background:#fff;min-width:88px}
.kpi b{display:block;font-size:22px}
.kpi span{font-size:12px;color:var(--muted);font-weight:800}
.tbl-wrap{overflow-x:auto}
table.t{border-collapse:collapse;width:100%;font-size:14px}
table.t th,table.t td{border-bottom:2px solid var(--line);padding:6px 7px;text-align:left;vertical-align:top}
table.t th{font-size:12px;color:var(--muted);white-space:nowrap}
table.t tr.click{cursor:pointer}
table.t tr.click:hover{background:var(--blue-soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:2px solid var(--ink);border-radius:999px;padding:4px 11px;font-weight:800;font-size:13px;background:#fff;cursor:pointer;user-select:none}
.chip.on{background:var(--ink);color:#fff}
.theme-chip{width:34px;height:34px;border-radius:50%;border:3px solid var(--ink);cursor:pointer}
.theme-chip.on{outline:4px solid var(--yel)}
.emoji-grid{display:flex;flex-wrap:wrap;gap:4px}
.emoji-grid button{font-size:24px;width:42px;height:42px;border:2px solid var(--line);border-radius:9px;background:#fff}
.emoji-grid button.on{border-color:var(--ink);background:var(--yel)}
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mode-card{border:3px solid var(--ink);border-radius:12px;background:#fff;padding:10px;text-align:left;box-shadow:3px 3px 0 var(--ink)}
.mode-card.on{background:var(--yel)}
.mode-card .e{font-size:28px}
.mode-card b{display:block;font-size:15px}
.mode-card small{color:var(--muted);font-weight:700;font-size:12px}
.steps{display:flex;gap:6px;margin-bottom:10px}
.steps span{flex:1;text-align:center;border:2.5px solid var(--ink);border-radius:10px;padding:6px;font-weight:900;background:#fff}
.steps span.on{background:var(--ink);color:#fff}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,100vw);z-index:70;background:var(--bg);border-left:4px solid var(--ink);box-shadow:-8px 0 0 rgba(20,35,47,.15);overflow:auto;padding:14px;animation:drawerIn .25s both}
.preview-q{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.preview-q .scene-box{position:relative;aspect-ratio:16/10.5;border:2px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}
.preview-q .scene-box .scene{position:absolute;inset:0}
.preview-arena{position:relative;height:340px;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff}
.opt-list{margin:6px 0;padding-left:22px}
.opt-list li.ans{color:var(--green);font-weight:900}
.find{border-left:4px solid var(--line);padding:3px 8px;margin:4px 0;font-size:13.5px}
.find.high{border-color:var(--red)}.find.mid{border-color:var(--amber)}.find.low{border-color:var(--line)}
code.j{display:block;white-space:pre-wrap;font-size:12px;background:#fff;border:2px solid var(--line);border-radius:9px;padding:8px;max-height:300px;overflow:auto}
@media (max-width:860px){.adm{grid-template-columns:1fr}.adm-nav{flex-direction:row;flex-wrap:wrap;position:static}.grid2,.grid3,.preview-q{grid-template-columns:1fr}}

/* ── 순위판(프로젝터) */
.bd-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start}
.bd-row{display:grid;grid-template-columns:56px minmax(120px,220px) minmax(0,1fr) 110px;gap:12px;align-items:center;border:3px solid var(--ink);border-radius:13px;background:#fff;padding:8px 12px;box-shadow:4px 4px 0 var(--ink);transition:transform .6s cubic-bezier(.3,1.2,.5,1)}
.bd-row .rk{font-size:30px;font-weight:900;text-align:center}
.bd-row .nm{font-size:21px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-row .nm small{display:block;font-size:13px;color:var(--muted);font-weight:700}
.bd-row .tr{position:relative;height:30px;border:3px solid var(--ink);border-radius:999px;background:#f3f5f7;overflow:hidden}
.bd-row .tr i{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(-45deg,var(--pen) 0 14px,#ff4d63 14px 28px);transition:width .6s}
.bd-row .sk{text-align:right;font-weight:900;font-size:28px;white-space:nowrap}
.bd-row .sk small{display:block;font-size:12px;color:var(--muted)}
.bd-row.fin{background:var(--green-soft)}.bd-row.fin .tr i{background:var(--green)}
.bd-row.reset{animation:resetFlash 1.1s}

@keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes signIn{from{transform:translateY(-18px) rotate(-2deg);opacity:0}to{transform:none;opacity:1}}
@keyframes bulbs{50%{background-position:8px 0}}
@keyframes blink{50%{opacity:.3}}
@keyframes bump{40%{transform:scale(1.35)}}
@keyframes pulse{0%,100%{box-shadow:2px 2px 0 var(--ink),0 0 0 0 rgba(232,25,60,.6)}50%{box-shadow:2px 2px 0 var(--ink),0 0 0 9px rgba(232,25,60,0)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes stamp{0%{transform:translate(-50%,-50%) rotate(-10deg) scale(2.4);opacity:0}100%{transform:translate(-50%,-50%) rotate(-10deg) scale(1);opacity:1}}
@keyframes fade{from{opacity:1}to{opacity:0}}
@keyframes slideIn{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes resetFlash{0%,60%{background:var(--red-soft);border-color:var(--red)}100%{background:#fff}}
@keyframes countPop{0%{transform:scale(2.2);opacity:0}30%{transform:scale(1);opacity:1}80%{opacity:1}100%{transform:scale(.7);opacity:0}}
@keyframes conf{0%{transform:translate(var(--x0),var(--y0)) rotate(0)}100%{transform:translate(var(--x1),var(--y1)) rotate(var(--r));opacity:0}}
@keyframes burstIn{0%{transform:translate(-50%,-50%) scale(2.6) rotate(-6deg);opacity:0}14%{transform:translate(-50%,-50%) scale(1) rotate(-3deg);opacity:1}80%{opacity:1}100%{transform:translate(-50%,-80%) scale(.9);opacity:0}}
@keyframes toastIn{from{transform:translate(-50%,-16px) scale(.85);opacity:0}to{transform:translateX(-50%);opacity:1}}
@keyframes modeToast{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}25%{transform:translate(-50%,-50%) scale(1.1);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-70%) scale(1);opacity:0}}
@keyframes chipIn{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) scale(1.06)}}
@keyframes drawerIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sign,.ticker li,.intro{animation:none}}

/* ── v2.2 스킬·아이템 바 */
.powers{flex:none;display:flex;align-items:center;gap:5px;max-width:52%;overflow-x:auto;scrollbar-width:none}
.powers::-webkit-scrollbar{display:none}
.pw-chips{display:flex;gap:3px}
.pw.chip{display:inline-flex;align-items:center;gap:1px;font-weight:900;font-size:13px;border:2px solid var(--ink);border-radius:9px;padding:1px 5px;background:#fff;white-space:nowrap}
.pw.chip.gold{background:#fff3c4}.pw.chip.fire{background:#ffd9c2;animation:pulse 1.2s infinite}.pw.chip.curse{background:#e6dcff}.pw.chip.help{background:#dff3e6}
.pw.act{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;height:44px;padding:1px 6px;border:3px solid var(--ink);border-radius:11px;background:#eef2f5;color:var(--muted);box-shadow:2px 2px 0 var(--ink);line-height:1.05}
.pw.act span{font-size:17px;font-weight:900}
.pw.act small{font-size:9.5px;font-weight:800;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw.act.ready{background:var(--red);color:#fff;animation:pulse 1.1s infinite}
.pw.act.item.ready{background:#7b4fd1}
.pw.act.arm{background:var(--yel);color:var(--red);animation:shake .45s infinite}
.pw.act.passive{background:#fff;color:var(--ink)}
.help-pop{position:absolute;left:10px;right:10px;top:34px;z-index:4;font-weight:900;font-size:var(--hint-size);line-height:1.35;background:#e9f7ee;border:3px solid var(--green);border-radius:10px;padding:6px 10px;box-shadow:2px 2px 0 var(--ink);animation:chipIn .35s both}
.help-pop.curse{background:#efe7ff;border-color:#7b4fd1;top:64px}
.prompt{position:relative}
/* 폰 한 줄 순위 */
.mr{display:inline-flex;align-items:center;gap:2px;margin-right:6px;font-size:11.5px;font-weight:800;white-space:nowrap}
.mr b{display:inline-grid;place-items:center;min-width:16px;height:16px;border-radius:5px;background:var(--ink);color:#fff;font-size:10px;padding:0 3px}
.mr.me b{background:var(--blue)}.mr.me{color:var(--blue)}
.mr em{font-style:normal;color:var(--pen)}
.mr i{font-style:normal;font-size:10px}
/* 골목: 분야 거리 · 예약 간판 */
.street{grid-column:1/-1;display:grid;gap:8px}
.street-name{margin:10px 2px 0;font-size:18px;font-weight:900}
.street-name small{font-size:12px;color:var(--muted);font-weight:800;margin-left:6px}
.street-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.sign.ready .board,.sign.closed .board{filter:saturate(.45)}
.sign.closed{opacity:.72}
.lamp.soon{background:#fff3c4;color:var(--amber)}
.lamp.closed{background:#e3e7ec;color:var(--muted)}
@media (max-width:820px){
  /* 폰: 아이템·견제를 제 줄로 내려 전체 폭을 쓴다(폭 58% 띠에 갇혀 안 보였다) */
  .powers{order:3;width:100%;max-width:100%;gap:5px;justify-content:flex-start;
    padding-top:5px;margin-top:4px;border-top:2px dashed #0002}
  .powers:empty{display:none;border:0;margin:0;padding:0}
  .pw.act{min-width:64px;height:46px;border-width:3px;padding:0 8px}
  .pw.act span{font-size:19px}.pw.act small{font-size:9.5px;max-width:74px}
  .pw.chip{font-size:12px;padding:1px 5px;border-width:2px}
  .help-pop{font-size:11.5px;padding:2px 6px;top:26px}.help-pop.curse{top:50px}
  .lb-sum{overflow-x:auto;text-overflow:clip;scrollbar-width:none}
  .street-row{grid-template-columns:1fr 1fr;gap:12px}
}

/* 관리자: 운영 시간·로테이션·스킬 규칙 */
.rules-form h3{margin:14px 0 4px;font-size:15px}
.rule-grid{display:grid;gap:6px}
.rule{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:700;font-size:14px;border:2px solid var(--line);border-radius:10px;padding:6px 9px;background:#fff}
.rule.sub{margin-left:22px;border-style:dashed;font-size:13px}
.input.mini{width:62px;padding:3px 6px;height:30px;display:inline-block}

/* HUD 가 좁은 폰에서 넘치지 않게 */
.hud{min-width:0}
.hud .bar{flex:1 1 auto;min-width:0}
.hud .bar .sub{min-width:0;gap:6px}
.hud .bar .sub span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud .bar .sub #hudRoom{flex:1 1 auto;text-align:center}
.game > *{min-width:0}
@media (max-width:820px){#hudBest{display:none}.hud .bar .sub #hudWrong{flex:none}}
.pw.chip.gate{background:#ffe0e0}
.help-pop.gate{background:#fff0f0;border-color:var(--red);top:34px}
@media (max-width:820px){.help-pop.gate{top:26px}}
.rule-inline{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:13px;margin-left:6px}
.clip-modal{position:fixed;inset:0;z-index:90;background:#000c;display:grid;place-items:center;padding:12px}
.btn.ink{background:#1b1b22;color:#ffe08a}
.plan-ticks{position:absolute;inset:0;pointer-events:none}.plan-ticks i{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ink);opacity:.55}
.plan-preview{margin:6px 0 0;font-weight:700;font-size:13px;line-height:1.6}
.seq-list:empty::before{content:'(아직 비어 있어요)';color:#888;font-size:12px}

/* ── 혼자 연습 설정·사부 음성 (2026-09-17) ───────────────────────────── */
.setrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0}
.setrow > b{font-size:14px;min-width:62px}
.setbtn{font:inherit;font-weight:900;font-size:15px;min-width:46px;padding:7px 10px;border:2.5px solid var(--ink);
  border-radius:10px;background:#fff;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.setbtn.on{background:var(--yel);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.setrow .muted{font-size:12px}
.soundrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.soundrow small{font-size:12px}
.btn.clipsound{font-weight:900;border-width:2.5px}
.btn.clipsound.on{background:var(--yel)}
/* 혼자 하는 방에서는 순위판 자리를 아예 비운다 */
body.solo-room .side{display:none}
body.solo-room .stage{max-width:900px;margin-inline:auto}
@media (max-width:760px){ .setrow > b{min-width:0} .setbtn{min-width:40px;padding:6px 8px;font-size:14px} }
.hint-name{margin:-2px 0 6px;font-size:12px;font-weight:700;color:#7a6a52;line-height:1.35}
.input.need{border-color:var(--red,#e8193c);box-shadow:0 0 0 3px #e8193c33;animation:needShake .35s}
@keyframes needShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* 마감 1분 전 경고 띠 — 게임을 가리지 않게 화면 맨 위에 얇게 (2026-09-17) */
.timewarn{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));background:var(--yel);color:var(--ink);
  border-bottom:3px solid var(--ink);box-shadow:0 3px 0 #0002;text-align:center;animation:warnIn .25s both}
.timewarn b{font-size:17px;font-weight:900;letter-spacing:-.4px}
.timewarn span{font-size:12px;font-weight:800;opacity:.85}
.timewarn.urgent{background:var(--red);color:#fff;animation:warnPulse .9s infinite}
@keyframes warnIn{from{transform:translateY(-100%)}}
@keyframes warnPulse{50%{background:#b3122f}}
@media (max-width:480px){ .timewarn b{font-size:15px} .timewarn span{font-size:11px} }

/* 쓸 수 있는 견제는 눈에 띄게 — 학생들이 «버튼이 없다»고 했다(2026-09-17) */
.pw.act.ready{background:var(--red);color:#fff;border-color:var(--ink);animation:pwReady 1.2s infinite}
.pw.act.ready small{color:#fff;opacity:.95}
@keyframes pwReady{50%{transform:translateY(-2px);box-shadow:2px 4px 0 var(--ink)}}
.pw.act.arm{background:var(--yel);color:var(--ink);animation:pwArm .45s infinite}
@keyframes pwArm{50%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){ .pw.act.ready,.pw.act.arm{animation:none} }

/* 그림 크게 보기(2026-09-22 폰 세로 점검) — 문제 그림을 누르면 화면 가득 다시 그린다. scenes2d.js openZoom */
.sc-zoomable{cursor:zoom-in}
.sc-zoom-hint{position:absolute;right:5px;bottom:5px;z-index:3;font-size:14px;line-height:1;padding:3px 5px;border-radius:8px;background:rgba(255,255,255,.88);border:1.5px solid var(--line,#c9d3de);pointer-events:none}
.sc-zoom{position:fixed;inset:0;z-index:9999;background:rgba(18,20,28,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px;cursor:zoom-out;animation:scZoomIn .16s ease-out both}
.sc-zoom-box{position:relative;width:min(96vw,1100px);height:min(80vh,820px);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.sc-zoom-box .scene{border:none;border-radius:0}
.sc-zoom-x{position:absolute;top:10px;right:12px;width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:rgba(0,0,0,.35);color:#fff;font-size:22px;font-weight:900;line-height:1;cursor:pointer}
.sc-zoom-tip{color:#fff;font-weight:800;font-size:14px;opacity:.85}
@keyframes scZoomIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sc-zoom{animation:none}}

/* 📝 모의중간시험 — 가게 간판 자리에, 모양은 시험지(위 머리띠 + 줄 친 종이) */
.mock-alley{padding-block:4px 0}
.mock-alley .street{gap:16px}
/* 과목방 대시보드 범주(2026-10-14) — 📝 시험지·시험 / 🎮 게임으로 연습(혼자 · 친구 방, 넓은 화면에선 나란히) / 🏮 가게 거리 */
.cat{margin:14px 0 6px;padding:12px 12px 6px;border:3px dashed rgba(23,32,42,.26);border-radius:18px;background:rgba(255,255,255,.38)}
.cat-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 2px 10px;font-size:20px;font-weight:900;letter-spacing:-.4px}
.cat-name span{background:var(--ink);color:#fff;border-radius:10px;padding:3px 12px 4px}
.cat-name small{font-size:12.5px;color:var(--muted);font-weight:800}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:14px;align-items:start}
.cat-grid .practice{margin-bottom:6px;padding:10px 12px 12px}
.cat .selfx-hero{margin:0 0 10px}
.cat .mock-alley .street-name{margin-top:2px}
.cat .alley{padding-block:2px 12px}
@media (max-width:560px){.cat{padding:10px 8px 4px;border-radius:14px}.cat-name{font-size:18px}}
/* 📝 나의 시험지 입구(2026-10-14) — 과목방 맨 위 노란 띠(교수: «하이라이트해서 들어가면 눈에 띄게»), 누르면 /selfexam */
.selfx-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;margin:4px 0 14px;padding:14px 16px;text-decoration:none;color:var(--ink);
  background:#ffd84d;border:4px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink)}
.selfx-hero:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.selfx-hero .ic{flex:none;font-size:42px;line-height:1;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25))}
.selfx-hero .tx{flex:1;min-width:0}
.selfx-hero .tx b{display:block;font-size:clamp(21px,5.4vw,28px);font-weight:900;letter-spacing:-.6px;line-height:1.15}
.selfx-hero .tx small{display:block;margin-top:4px;font-size:13.5px;font-weight:800;line-height:1.4;color:#3a2f00}
.selfx-hero .go{flex:none;background:var(--ink);color:#ffd84d;border-radius:12px;padding:11px 14px;font-weight:900;font-size:16px;white-space:nowrap}
.selfx-hero::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:selfxShine 3.2s ease-in-out infinite;pointer-events:none}
@keyframes selfxShine{0%,55%{left:-40%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.selfx-hero::after{animation:none;display:none}}
@media (max-width:560px){.selfx-hero{flex-wrap:wrap;padding:12px 14px}.selfx-hero .ic{font-size:34px}.selfx-hero .go{width:100%;text-align:center}}
.exam-card{grid-column:1/-1;display:block;text-decoration:none;color:var(--ink);border:4px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);background:#fffdf6;overflow:hidden}
.exam-card:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.exam-card .exam-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--ink);color:#ffd84d;padding:10px 16px;font-weight:900;font-size:18px;letter-spacing:.04em}
.exam-card .exam-head small{margin-left:auto;color:#c9d6e2;font-size:12.5px;font-weight:800;letter-spacing:0}
.exam-card .exam-body{display:flex;align-items:center;gap:14px;padding:14px 16px 16px;background:repeating-linear-gradient(#fffdf6 0 29px,#ece5cf 29px 30px)}
.exam-card .exam-main{flex:1;min-width:0}
.exam-card .exam-title{font-size:clamp(20px,4.6vw,27px);font-weight:900;letter-spacing:-.6px;line-height:1.2;overflow-wrap:anywhere}
.exam-card .exam-meta{font-weight:800;font-size:13.5px;color:var(--muted);margin-top:4px}
.exam-card .exam-state{display:inline-block;margin-top:9px;border:2px solid var(--ink);border-radius:999px;padding:3px 11px;font-weight:900;font-size:13px;background:#fff}
.exam-card .exam-state.started{background:#d9f7e3}.exam-card .exam-state.ready{background:#fff5c9}.exam-card .exam-state.closed{background:#eceff2}
.exam-card .exam-go{flex:none;background:#ffd84d;border:3px solid var(--ink);border-radius:12px;padding:10px 14px;font-weight:900;font-size:16px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.exam-card.closed .exam-go{background:#fff}
@media (max-width:560px){.exam-card .exam-head small{margin-left:0;width:100%}.exam-card .exam-body{flex-wrap:wrap}.exam-card .exam-go{width:100%;text-align:center}}

/* 🎯 어떤 문제로?(2.29.0, js/core/target.js) — 혼자 연습 · 내가 여는 방 */
.tp-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.tp-head b{font-size:15px}
.tp-head .muted{font-size:12.5px}
.tp-slot:empty{display:none}
.tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.tp-b{display:flex;align-items:center;gap:5px;border:2.5px solid var(--ink);border-radius:11px;background:#fff;padding:6px 8px;font:inherit;font-weight:800;font-size:13px;cursor:pointer;text-align:left;box-shadow:2px 2px 0 var(--ink);min-height:42px;color:var(--ink)}
.tp-b:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.tp-b .e{font-size:17px;line-height:1;flex:none}
.tp-b b{flex:1;min-width:0;line-height:1.2;font-weight:800}
.tp-b i{font-style:normal;font-size:12px;background:var(--bg);border:1.5px solid var(--ink);border-radius:999px;padding:0 6px;font-weight:900;flex:none}
.tp-b.on{background:var(--ink);color:#fff}
.tp-b.on i{background:var(--yel);color:var(--ink)}
.tp-b.few:not(.on){opacity:.5}
.tp-d{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.tp-d b{color:var(--ink)}
.tp-n{margin:4px 0 2px;font-size:13.5px;font-weight:800}
.tp-n.bad{color:var(--red)}
.tp-c{border:2px dashed var(--line);border-radius:11px;padding:8px 10px;margin-top:6px;display:grid;gap:6px}
.tp-r{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
.tp-r>b{min-width:72px}
.tp-r select{font:inherit;font-weight:800;border:2px solid var(--ink);border-radius:8px;padding:3px 4px;background:#fff;color:var(--ink)}
.tp-r select:disabled,.tp-q button:disabled{opacity:.4}
.tp-seg,.tp-q{display:inline-flex;gap:4px;flex-wrap:wrap}
.tp-rng{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.tp-seg button,.tp-q button{font:inherit;font-size:12.5px;font-weight:800;border:2px solid var(--ink);border-radius:999px;padding:3px 9px;background:#fff;cursor:pointer;color:var(--ink)}
.tp-seg button.on,.tp-q button.on{background:var(--ink);color:#fff}
.tp-h{margin:0;font-size:12px;color:var(--muted);line-height:1.5}